Merge branch 'manawiki:main' into main

manasites · Mar 11, 2024 · 7140eef · 7140eef
2 parents 1d69959 + 8dcad09
commit 7140eef
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/app/routes/_editor+/core/components/BlockSelector.tsx b/app/routes/_editor+/core/components/BlockSelector.tsx
@@ -71,7 +71,8 @@ export function BlockSelector({
                type: BlockType.Image,
                refId: null,
                url: null,
-               caption: null,
+               caption: false,
+               containerWidth: 728,
                children: [{ text: "" }],
             });
          },

diff --git a/app/routes/_editor+/core/components/EditorView.tsx b/app/routes/_editor+/core/components/EditorView.tsx
@@ -1,9 +1,8 @@
 import { useCallback, useMemo } from "react";
 
-import clsx from "clsx";
 import { createEditor } from "slate";
 import type { RenderElementProps } from "slate-react";
-import { Slate, Editable, withReact } from "slate-react";
+import { Slate, Editable, withReact, ReactEditor } from "slate-react";
 
 // eslint-disable-next-line import/no-cycle
 import { EditorBlocks } from "./EditorBlocks";
@@ -14,25 +13,25 @@ export function EditorView({ data }: { data: any }) {
    const editor = useMemo(() => withReact(createEditor()), []);
 
    const renderElement = useCallback((props: RenderElementProps) => {
-      const isVariableWidth = props.element.type === BlockType.Image;
+      const path = ReactEditor.findPath(editor, props.element);
+      const isTopLevel = path.length === 1;
+      const isVariableWidth =
+         props.element.type === BlockType.Image && props.element.containerWidth;
 
-      return (
-         <span
+      return isTopLevel ? (
+         <div
             style={{
-               width:
-                  //@ts-ignore
-                  isVariableWidth && props.element.containerWidth
-                     ? //@ts-ignore
-                       `${props.element.containerWidth}px`
-                     : "728px",
+               width: isVariableWidth
+                  ? //@ts-ignore
+                    `${props.element.containerWidth}px`
+                  : "728px",
             }}
-            className={clsx(
-               !isVariableWidth && "mx-auto max-w-[728px]",
-               "w-full group/editor relative mx-auto max-tablet:!max-w-full max-tablet:!w-full",
-            )}
+            className="relative mx-auto max-tablet:!w-full"
          >
             <EditorBlocks {...props} />
-         </span>
+         </div>
+      ) : (
+         <EditorBlocks {...props} />
       );
    }, []);
    return (

diff --git a/app/routes/_editor+/core/dnd.tsx b/app/routes/_editor+/core/dnd.tsx
@@ -334,15 +334,13 @@ function HoverElement({
    const isParentTwoColumn =
       element.type == BlockType.TwoColumn && !isTwoColumn;
 
-   const isVariableWidth = element.type === BlockType.Image;
+   const isVariableWidth =
+      element.type === BlockType.Image && element.containerWidth;
 
    return (
       <section
          style={{
-            width:
-               isVariableWidth && element.containerWidth
-                  ? `${element.containerWidth}px`
-                  : "728px",
+            width: isVariableWidth ? `${element.containerWidth}px` : "728px",
          }}
          className="group/editor relative mx-auto max-tablet:!w-full"
       >