fix: Editor UI

apps/web/src/layout/toolbar/index.tsx

@@ -435,7 +435,7 @@ const Toolbar: Component<{ class?: string }> = (props) => {
   return (
     <div
       class={clsx(
-        ":base-2: p-1 w-full flex items-center border-b-2 absolute h-12 border-gray-200 dark:border-gray-700 justify-end @container z-1",
+        ":base-2: p-1 w-full flex items-center border-b-2 absolute h-12 border-gray-200 dark:border-gray-700 justify-end @container z-10",
         props.class
       )}
     >

apps/web/src/lib/editor/extensions/code-block/menu.tsx

@@ -37,7 +37,7 @@ const CodeBlockMenu: Component<CodeBlockMenuProps> = (props) => {
   );
 
   return (
-    <div class="pointer-events-auto flex bg-gray-50 dark:bg-gray-900 !md:bg-transparent border-gray-200 dark:border-gray-700 border-y-2 md:border-0 backdrop-blur-sm md:gap-2 w-screen md:w-auto left-[5px] !md:left-unset relative md:rounded-2xl">
+    <div class="pointer-events-auto flex bg-gray-50 dark:bg-gray-900 !md:bg-transparent border-gray-200 dark:border-gray-700 border-y-2 md:border-0 backdrop-blur-sm md:gap-2 w-screen md:w-auto left-0 !md:left-unset relative md:rounded-2xl">
       <Card class="flex py-0 m-0 border-0 md:border-2 px-1 gap-1">
         <Tooltip text="Title">
           <IconButton

apps/web/src/lib/editor/extensions/embed/menu.tsx

@@ -30,7 +30,7 @@ const EmbedMenu: Component<ImageMenuProps> = (props) => {
   };
 
   return (
-    <div class="pointer-events-auto flex bg-gray-50 dark:bg-gray-900 !md:bg-transparent border-gray-200 dark:border-gray-700 border-y-2 md:border-0 backdrop-blur-sm md:gap-2 w-screen md:w-auto left-[5px] !md:left-unset relative md:rounded-2xl">
+    <div class="pointer-events-auto flex bg-gray-50 dark:bg-gray-900 !md:bg-transparent border-gray-200 dark:border-gray-700 border-y-2 md:border-0 backdrop-blur-sm md:gap-2 w-screen md:w-auto left-0 !md:left-unset relative md:rounded-2xl">
       <Card class="flex m-0 border-0 md:border-2 p-1">
         <Input
           wrapperClass="max-w-full min-w-unset md:w-96 flex-1"

apps/web/src/lib/editor/extensions/image/menu.tsx

@@ -52,7 +52,7 @@ const ImageMenu: Component<ImageMenuProps> = (props) => {
         "pointer-events-auto flex bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 border-y-2 backdrop-blur-sm relative",
         options().cover && "w-full border-t-0",
         !options().cover &&
-          "md:gap-2 w-screen md:w-auto md:border-0 md:rounded-2xl !md:bg-transparent left-[5px] !md:left-unset"
+          "md:gap-2 w-screen md:w-auto md:border-0 md:rounded-2xl !md:bg-transparent left-0 !md:left-unset"
       )}
     >
       <Card class={clsx("flex py-0 m-0 border-0  px-1 gap-1", !options().cover && "md:border-2")}>

apps/web/src/views/editor/editor.tsx

@@ -215,7 +215,10 @@ const Editor: Component<EditorProps> = (props) => {
     const { selection } = state;
     const { $anchor, empty } = selection;
     const isRootDepth =
-      $anchor.depth === 1 || ($anchor.depth === 2 && $anchor.node(1).type.name === "element");
+      $anchor.depth === 1 ||
+      ["element", "blockquote", "listItem", "taskItem"].includes(
+        $anchor.node($anchor.depth - 1)?.type?.name
+      );
     const isEmptyTextBlock =
       $anchor.parent.isTextblock &&
       !$anchor.parent.type.spec.code &&

apps/web/src/views/editor/menus/bubble/index.tsx

@@ -60,6 +60,8 @@ const BubbleMenu: Component<BubbleMenuProps> = (props) => {
           mode={mode()}
           opened={props.opened}
           setMode={setMode}
+          setBlockMenuOpened={props.setBlockMenuOpened}
+          blur={props.blur}
           class={props.class}
         />
       </Match>

apps/web/vite.config.ts

@@ -6,6 +6,7 @@ import unocss from "unocss/vite";
 export default defineConfig(async ({ mode }) => {
   const plugins: PluginOption[] = [tsconfigPaths(), unocss(), solidPlugin()];
   const env = loadEnv(mode, process.cwd(), "PUBLIC_");
+  const proxyTarget = env.PUBLIC_APP_URL;
 
   if (mode === "development") {
     // Only transform index.html in dev mode - in production Handlebars will do this
@@ -25,13 +26,13 @@ export default defineConfig(async ({ mode }) => {
     server: {
       proxy: {
         "/api": {
-          target: "http://localhost:3333",
+          target: proxyTarget,
           ws: true
         },
-        "/session": { target: "http://localhost:3333", ws: true },
-        "/login": { target: "http://localhost:3333", ws: true },
-        "/github": { target: "http://localhost:3333", ws: true },
-        "/upload": { target: "http://localhost:3333", ws: true }
+        "/session": { target: proxyTarget, ws: true },
+        "/login": { target: proxyTarget, ws: true },
+        "/github": { target: proxyTarget, ws: true },
+        "/upload": { target: proxyTarget, ws: true }
       }
     },
     build: {

packages/editor/src/code-block.ts

@@ -23,19 +23,12 @@ declare module "@tiptap/core" {
 
 const CodeBlock = Node.create<CodeBlockOptions>({
   name: "codeBlock",
-
   content: "text*",
-
   marks: "",
-
   group: "block",
-
   code: true,
-
   atom: true,
-
   isolating: true,
-
   addOptions() {
     return {
       inline: false,

packages/extensions/src/mdx/functions/configure.ts

@@ -5,15 +5,15 @@ const configure = async (context: ExtensionBaseContext): Promise<void> => {
   const mdxTransformer = transformers.find((transformer) => {
     return (
       transformer.label === "MDX" &&
-      transformer.input === "http://localhost:7777/mdx/input" &&
-      transformer.output === "http://localhost:7777/mdx/output"
+      transformer.input === "https://extensions.vrite.io/mdx/input" &&
+      transformer.output === "https://extensions.vrite.io/mdx/output"
     );
   });
 
   if (!mdxTransformer) {
     await context.client.transformers.create({
-      input: "http://localhost:7777/mdx/input",
-      output: "http://localhost:7777/mdx/output",
+      input: "https://extensions.vrite.io/mdx/input",
+      output: "https://extensions.vrite.io/mdx/output",
       maxBatchSize: 100,
       label: "MDX"
     });

packages/extensions/src/mdx/functions/uninstall.ts

@@ -7,8 +7,8 @@ const uninstall = async (context: ExtensionGeneralContext): Promise<void> => {
     const mdxTransformer = transformers.find((transformer) => {
       return (
         transformer.label === "MDX" &&
-        transformer.input === "http://localhost:7777/mdx/input" &&
-        transformer.output === "http://localhost:7777/mdx/output"
+        transformer.input === "https://extensions.vrite.io/mdx/input" &&
+        transformer.output === "https://extensions.vrite.io/mdx/output"
       );
     });