diegohaz · August 18, 2022 12:39 · May 29, 2021 · May 29, 2021 · May 29, 2021 · May 29, 2021
diff --git a/Editor.jsx b/Editor.jsx
@@ -44,14 +44,15 @@ const Link = createBlock<LinkProps>((props) => {
 });
 
 const ListItem = createBlock((props) => {
-  const { value, insertBlock } = useEditorState(props);
+  const { value, insertBlock, removeBlock } = useEditorState(props);
   useEnter((defaultAction) => {
     if (value.length) {
       insertBlock("ListItem");
     } else {
+      removeBlock(props.id);
       defaultAction();
     }
-  }, [value, insertBlock]);
+  }, [value, insertBlock, removeBlock, props.id]);
   return <Text as="li" {...props} />;
 });
 

diff --git a/Editor.jsx b/Editor.jsx
@@ -11,8 +11,7 @@ const Link = createBlock<LinkProps>((props) => {
 
   useEffect(() => {
     return onSelectionChange((selection) => {
-      // Check parents
-      if (selection.startContainerId === props.id || selection.endContainerId === props.id) {
+      if (selection.startContainerIds.includes(props.id) && selection.endContainerIds.includes(props.id)) {
         popover.show();
       }
     });

diff --git a/Editor.jsx b/Editor.jsx
@@ -11,6 +11,7 @@ const Link = createBlock<LinkProps>((props) => {
 
   useEffect(() => {
     return onSelectionChange((selection) => {
+      // Check parents
       if (selection.startContainerId === props.id || selection.endContainerId === props.id) {
         popover.show();
       }

diff --git a/Editor.jsx b/Editor.jsx
@@ -28,7 +28,7 @@ const Link = createBlock<LinkProps>((props) => {
           props.onClick?.(event);
           if (event.defaultPrevented) return;
           event.preventDefault();
-          popover.selectBlockConents();
+          selectBlockConents(props.id);
         }}
       >
         {(disclosureProps) => (

diff --git a/Editor.jsx b/Editor.jsx
@@ -1,19 +1,41 @@
 type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const Link = createBlock<LinkProps>((props) => {
-  const popover = usePopoverState();
+  const { onSelectionChange, selectBlockContents } = useEditorState(props);
+  const popover = usePopoverState({ portal: true });
   const [href, setHref] = useState(props.href);
+
   useEffect(() => {
     setHref(props.href);
   }, [props.href]);
+
+  useEffect(() => {
+    return onSelectionChange((selection) => {
+      if (selection.startContainerId === props.id || selection.endContainerId === props.id) {
+        popover.show();
+      }
+    });
+  }, [onSelect, props.id, popover.show]);
+
   return (
     <>
-      <PopoverDisclosure as="a" state={state} {...props} href={href}>
+      <PopoverDisclosure
+        as="a"
+        state={popover}
+        {...props}
+        href={href}
+        onClick={(event) => {
+          props.onClick?.(event);
+          if (event.defaultPrevented) return;
+          event.preventDefault();
+          popover.selectBlockConents();
+        }}
+      >
         {(disclosureProps) => (
           <Text as="a" {...disclosureProps} />
         )}
       </PopoverDisclosure>
-      <Popover state={state}>
+      <Popover autoFocusOnShow={false} state={popover}>
         <a href={href} />
         <button>Edit</button>
       </Popover>

diff --git a/Editor.jsx b/Editor.jsx
@@ -1,3 +1,38 @@
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+
+const Link = createBlock<LinkProps>((props) => {
+  const popover = usePopoverState();
+  const [href, setHref] = useState(props.href);
+  useEffect(() => {
+    setHref(props.href);
+  }, [props.href]);
+  return (
+    <>
+      <PopoverDisclosure as="a" state={state} {...props} href={href}>
+        {(disclosureProps) => (
+          <Text as="a" {...disclosureProps} />
+        )}
+      </PopoverDisclosure>
+      <Popover state={state}>
+        <a href={href} />
+        <button>Edit</button>
+      </Popover>
+    </>
+  );
+});
+
+const ListItem = createBlock((props) => {
+  const { value, insertBlock } = useEditorState(props);
+  useEnter((defaultAction) => {
+    if (value.length) {
+      insertBlock("ListItem");
+    } else {
+      defaultAction();
+    }
+  }, [value, insertBlock]);
+  return <Text as="li" {...props} />;
+});
+
 const ListItem = createEditorComponent((props) => {
   const editor = useEditorState(props);
   useEditorEnter(() => {

diff --git a/Editor.jsx b/Editor.jsx
@@ -13,7 +13,13 @@ type ListProps = {
 };
 
 const List = createEditorComponent<ListProps>((props) => {
-  const editor = useEditorState(props);
+  const editor = useEditorState({
+    ...props,
+    defaultValue: [{
+      type: "ListItem",
+      id: `${props.id}-1`,
+    }],
+  });
   const type = useEditorInput(
     ToggleGroup,
     {
@@ -27,6 +33,7 @@ const List = createEditorComponent<ListProps>((props) => {
   );
   const component = type === "ordered" ? "ol" : "ul";
 
+  // if defaultValue doesn't work
   useLayoutEffect(() => {
     if (!editor.value.length) {
       const selection = {

diff --git a/Editor.jsx b/Editor.jsx
@@ -1,4 +1,8 @@
 const ListItem = createEditorComponent((props) => {
+  const editor = useEditorState(props);
+  useEditorEnter(() => {
+    editor.insertElement("ListItem");
+  }, [editor.insertElement]);
   return <Text as="li" {...props} />;
 });
 

diff --git a/Editor.jsx b/Editor.jsx
@@ -1,3 +1,43 @@
+const ListItem = createEditorComponent((props) => {
+  return <Text as="li" {...props} />;
+});
+
+type ListProps = {
+  inputs: {
+    type: "ordered" | "unordered";
+  };
+};
+
+const List = createEditorComponent<ListProps>((props) => {
+  const editor = useEditorState(props);
+  const type = useEditorInput(
+    ToggleGroup,
+    {
+      ...props,
+      name: "type",
+      options: [
+        { value: "ordered", label: "Ordered", icon: "Ordered" },
+        { value: "unordered", label: "Unordered", icon: "Unordered" },
+      ],
+    }
+  );
+  const component = type === "ordered" ? "ol" : "ul";
+
+  useLayoutEffect(() => {
+    if (!editor.value.length) {
+      const selection = {
+        startContainerId: props.id,
+        startOffset: 0,
+        endContainerId: props.id,
+        endOffset: 0,
+      };
+      editor.insertElement("ListItem", null, selection);
+    }
+  }, [editor.insertElement, editor.value, props.id]);
+
+  return <EditorComponent as={component} {...props} />;
+});
+
 type HeadingProps = TextProps & {
   inputs: {
     level?: number;
@@ -8,7 +48,9 @@ const Heading = createEditorComponent<HeadingProps>((props) => {
   const level = useEditorInput(HeadingLevel, { ...props, name: "level", label: "Heading level" });
   const component = `h${level}`;
 
-  return <Text {...props} as={component} />;
+  useEditorReplace("Paragraph");
+
+  return <Text as={component} {...props} />;
 });
 
 Heading.defaultProps = {

diff --git a/Editor.jsx b/Editor.jsx
@@ -39,7 +39,7 @@ const defaultComponents = {
 
 function App() {
   const editor = useEditorState({ defaultComponents });
-  editor.getSelection(); // { containerId: "id", offset: 0, startContainerId: "id", startOffset: 0, endContainerId: "id", endOffset: 3 }
+  editor.getSelection(); // { startContainerId: "id", startOffset: 0, endContainerId: "id", endOffset: 3, collapsed: false }
   editor.insertElement("Paragraph", null, editor.getSelection());
   editor.insertElement(Heading, { inputs: { level: 2 } });
   editor.replaceElement(Paragraph);

diff --git a/Editor.jsx b/Editor.jsx
@@ -39,6 +39,7 @@ const defaultComponents = {
 
 function App() {
   const editor = useEditorState({ defaultComponents });
+  editor.getSelection(); // { containerId: "id", offset: 0, startContainerId: "id", startOffset: 0, endContainerId: "id", endOffset: 3 }
   editor.insertElement("Paragraph", null, editor.getSelection());
   editor.insertElement(Heading, { inputs: { level: 2 } });
   editor.replaceElement(Paragraph);

diff --git a/Editor.jsx b/Editor.jsx
@@ -39,5 +39,8 @@ const defaultComponents = {
 
 function App() {
   const editor = useEditorState({ defaultComponents });
+  editor.insertElement("Paragraph", null, editor.getSelection());
+  editor.insertElement(Heading, { inputs: { level: 2 } });
+  editor.replaceElement(Paragraph);
   return <Editor state={editor} />;
 }
diff --git a/Editor.jsx b/Editor.jsx
@@ -26,7 +26,7 @@ Heading.triggers = {
 };
 
 const HeadingLevel = createEditorInput<HeadingProps>((props) => {
-  const [value, setValue] = useEditorInputState(props);
+  useEditorInputValue(props, "value");
   return <div />;
 });
 

diff --git a/Editor.jsx b/Editor.jsx
@@ -1,14 +1,3 @@
-import {
-  createEditorComponent,
-  createEditorInput,
-  useEditorInput,
-  useEditorInputValue,
-} from "editor";
-import {
-  Text,
-  TextProps,
-} from "editor/components";
-
 type HeadingProps = TextProps & {
   inputs: {
     level?: number;

diff --git a/Editor.jsx b/Editor.jsx
@@ -37,6 +37,18 @@ Heading.triggers = {
 };
 
 const HeadingLevel = createEditorInput<HeadingProps>((props) => {
-  useEditorInputValue(props, "");
+  const [value, setValue] = useEditorInputState(props);
+  return <div />;
+});
+
+const defaultComponents = {
+  Paragraph,
+  Bold,
+  Heading,
   ...
-});
+};
+
+function App() {
+  const editor = useEditorState({ defaultComponents });
+  return <Editor state={editor} />;
+}
diff --git a/Editor.jsx b/Editor.jsx
@@ -16,7 +16,7 @@ type HeadingProps = TextProps & {
 };
 
 const Heading = createEditorComponent<HeadingProps>((props) => {
-  const level = useEditorInput("HeadingLevel", { ...props, name: "level", label: "Heading level" });
+  const level = useEditorInput(HeadingLevel, { ...props, name: "level", label: "Heading level" });
   const component = `h${level}`;
 
   return <Text {...props} as={component} />;

diff --git a/Editor.jsx b/Editor.jsx
@@ -22,8 +22,10 @@ const Heading = createEditorComponent<HeadingProps>((props) => {
   return <Text {...props} as={component} />;
 });
 
-Heading.defaultInputs = {
-  level: 1,
+Heading.defaultProps = {
+  inputs: {
+    level: 1,
+  },
 };
 
 Heading.triggers = {

diff --git a/Editor.jsx b/Editor.jsx
@@ -22,6 +22,10 @@ const Heading = createEditorComponent<HeadingProps>((props) => {
   return <Text {...props} as={component} />;
 });
 
+Heading.defaultInputs = {
+  level: 1,
+};
+
 Heading.triggers = {
   "#{1,6}": (text) => ({
     inputs: {

diff --git a/Editor.jsx b/Editor.jsx
@@ -2,6 +2,7 @@ import {
   createEditorComponent,
   createEditorInput,
   useEditorInput,
+  useEditorInputValue,
 } from "editor";
 import {
   Text,
@@ -30,5 +31,6 @@ Heading.triggers = {
 };
 
 const HeadingLevel = createEditorInput<HeadingProps>((props) => {
+  useEditorInputValue(props, "");
   ...
 });
diff --git a/Editor.jsx b/Editor.jsx
@@ -1,6 +1,7 @@
 import {
   createEditorComponent,
   createEditorInput,
+  useEditorInput,
 } from "editor";
 import {
   Text,
@@ -14,7 +15,7 @@ type HeadingProps = TextProps & {
 };
 
 const Heading = createEditorComponent<HeadingProps>((props) => {
-  const level = useHeadingLevelInput({ ...props, name: "level", label: "Heading level" });
+  const level = useEditorInput("HeadingLevel", { ...props, name: "level", label: "Heading level" });
   const component = `h${level}`;
 
   return <Text {...props} as={component} />;
@@ -28,6 +29,6 @@ Heading.triggers = {
   });
 };
 
-const useHeadingLevelInput = createEditorInput<HeadingProps>((props) => {
-  useInputRender(() => <input />, []);
+const HeadingLevel = createEditorInput<HeadingProps>((props) => {
+  ...
 });
diff --git a/Editor.jsx b/Editor.jsx
@@ -1,7 +1,6 @@
 import {
   createEditorComponent,
   createEditorInput,
-  useTrigger,
 } from "editor";
 import {
   Text,
@@ -18,14 +17,16 @@ const Heading = createEditorComponent<HeadingProps>((props) => {
   const level = useHeadingLevelInput({ ...props, name: "level", label: "Heading level" });
   const component = `h${level}`;
 
-  useTrigger("#{1,6}", (text) => ({
+  return <Text {...props} as={component} />;
+});
+
+Heading.triggers = {
+  "#{1,6}": (text) => ({
     inputs: {
       level: text.length,
     },
-  }));
-
-  return <Text {...props} as={component} />;
-});
+  });
+};
 
 const useHeadingLevelInput = createEditorInput<HeadingProps>((props) => {
   useInputRender(() => <input />, []);

diff --git a/Editor.jsx b/Editor.jsx
@@ -2,9 +2,11 @@ import {
   createEditorComponent,
   createEditorInput,
   useTrigger,
+} from "editor";
+import {
   Text,
   TextProps,
-} from "editor";
+} from "editor/components";
 
 type HeadingProps = TextProps & {
   inputs: {

diff --git a/Editor.jsx b/Editor.jsx
@@ -1,6 +1,7 @@
 import {
   createEditorComponent,
   createEditorInput,
+  useTrigger,
   Text,
   TextProps,
 } from "editor";
@@ -14,6 +15,13 @@ type HeadingProps = TextProps & {
 const Heading = createEditorComponent<HeadingProps>((props) => {
   const level = useHeadingLevelInput({ ...props, name: "level", label: "Heading level" });
   const component = `h${level}`;
+
+  useTrigger("#{1,6}", (text) => ({
+    inputs: {
+      level: text.length,
+    },
+  }));
+
   return <Text {...props} as={component} />;
 });
 

diff --git a/Editor.tsx → Editor.jsx b/Editor.tsx → Editor.jsx
diff --git a/Editor.tsx b/Editor.tsx
@@ -1,3 +1,22 @@
 import {
-  createEditorComponent
-} from "editor";
+  createEditorComponent,
+  createEditorInput,
+  Text,
+  TextProps,
+} from "editor";
+
+type HeadingProps = TextProps & {
+  inputs: {
+    level?: number;
+  };
+};
+
+const Heading = createEditorComponent<HeadingProps>((props) => {
+  const level = useHeadingLevelInput({ ...props, name: "level", label: "Heading level" });
+  const component = `h${level}`;
+  return <Text {...props} as={component} />;
+});
+
+const useHeadingLevelInput = createEditorInput<HeadingProps>((props) => {
+  useInputRender(() => <input />, []);
+});
diff --git a/Editor.tsx b/Editor.tsx
@@ -0,0 +1,3 @@
+import {
+  createEditorComponent
+} from "editor";