LXP-4991 :: Accept html as value

package.json

@@ -2,7 +2,7 @@
   "name": "novel",
   "private": true,
   "scripts": {
-    "build": "turbo build",
+    "build": "npm install && cd packages/core && npm install && npm run build && cd ../../",
     "dev": "turbo dev",
     "lint": "turbo lint",
     "clean": "turbo clean",
@@ -49,9 +49,11 @@
     "react-markdown": "^8.0.7",
     "react-moveable": "^0.54.1",
     "sonner": "^0.7.0",
+    "tailwind-config": "^0.1.2",
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.2",
+    "tsconfig": "^7.0.0",
     "typescript": "4.9.5",
     "use-debounce": "^9.0.4"
   },

packages/core/package.json

@@ -71,8 +71,8 @@
     "eslint": "^7.32.0",
     "postcss": "^8.4.29",
     "react": "^18.2.0",
-    "tailwind-config": "workspace:*",
-    "tsconfig": "workspace:*",
+    "tailwind-config": "^0.1.2",
+    "tsconfig": "^7.0.0",
     "tsup": "^7.2.0",
     "typescript": "^4.9.4"
   },

packages/core/src/ui/editor/bubble-menu/color-selector.tsx

@@ -109,7 +109,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
     <Popover.Root open={isOpen}>
       <div className="novel-relative novel-h-full">
         <Popover.Trigger
-          className="novel-flex novel-h-full novel-items-center novel-gap-1 novel-p-2 novel-text-sm novel-font-medium novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
+          className="novel-flex novel-h-full novel-items-center novel-gap-1 novel-p-2 novel-text-sm novel-font-medium novel-text-stone-600 novel-bg-white novel-border-transparent hover:novel-bg-stone-100 active:novel-bg-stone-200"
           onClick={() => setIsOpen(!isOpen)}
         >
           <span
@@ -145,7 +145,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     .run();
                 setIsOpen(false);
               }}
-              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 hover:novel-bg-stone-100"
+              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 novel-bg-white novel-border-transparent hover:novel-bg-stone-100"
               type="button"
             >
               <div className="novel-flex novel-items-center novel-space-x-2">
@@ -175,7 +175,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 name !== "Default" && editor.commands.setHighlight({ color });
                 setIsOpen(false);
               }}
-              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 hover:novel-bg-stone-100"
+              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 novel-bg-white novel-border-transparent hover:novel-bg-stone-100"
               type="button"
             >
               <div className="novel-flex novel-items-center novel-space-x-2">

packages/core/src/ui/editor/bubble-menu/index.tsx

@@ -62,10 +62,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       const { empty } = selection;
 
       // don't show bubble menu if:
+      // - the editor is not editable
       // - the selected node is an image
       // - the selection is empty
       // - the selection is a node selection (for drag handles)
-      if (editor.isActive("image") || empty || isNodeSelection(selection)) {
+      if (
+        !editor.isEditable ||
+        editor.isActive("image") ||
+        empty ||
+        isNodeSelection(selection)
+      ) {
         return false;
       }
       return true;
@@ -112,7 +118,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           <button
             key={index}
             onClick={item.command}
-            className="novel-p-2 novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
+            className="novel-border-transparent novel-bg-white novel-p-2 novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
             type="button"
           >
             <item.icon

packages/core/src/ui/editor/bubble-menu/link-selector.tsx

@@ -25,7 +25,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
     <div className="novel-relative">
       <button
         type="button"
-        className="novel-flex novel-h-full novel-items-center novel-space-x-2 novel-px-3 novel-py-1.5 novel-text-sm novel-font-medium novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
+        className="novel-flex novel-h-full novel-items-center novel-space-x-2 novel-px-3 novel-py-1.5 novel-text-sm novel-font-medium novel-text-stone-600 novel-bg-white novel-border-transparent hover:novel-bg-stone-100 active:novel-bg-stone-200"
         onClick={() => {
           setIsOpen(!isOpen);
         }}

packages/core/src/ui/editor/bubble-menu/node-selector.tsx

@@ -102,7 +102,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
     <Popover.Root open={isOpen}>
       <div className="novel-relative novel-h-full">
         <Popover.Trigger
-          className="novel-flex novel-h-full novel-items-center novel-gap-1 novel-whitespace-nowrap novel-p-2 novel-text-sm novel-font-medium novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
+          className="novel-bg-white novel-border-transparent novel-flex novel-h-full novel-items-center novel-gap-1 novel-whitespace-nowrap novel-p-2 novel-text-sm novel-font-medium novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
           onClick={() => setIsOpen(!isOpen)}
         >
           <span>{activeItem?.name}</span>
@@ -120,7 +120,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
                 item.command();
                 setIsOpen(false);
               }}
-              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 hover:novel-bg-stone-100"
+              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 novel-bg-white novel-border-transparent hover:novel-bg-stone-100"
               type="button"
             >
               <div className="flex items-center space-x-2">

packages/core/src/ui/editor/extensions/drag-and-drop.tsx

@@ -104,13 +104,13 @@ function DragHandle(options: DragHandleOptions) {
 
   function hideDragHandle() {
     if (dragHandleElement) {
-      dragHandleElement.classList.add("hidden");
+      dragHandleElement.classList.add("visually-hidden");
     }
   }
 
   function showDragHandle() {
     if (dragHandleElement) {
-      dragHandleElement.classList.remove("hidden");
+      dragHandleElement.classList.remove("visually-hidden");
     }
   }
 
@@ -161,7 +161,7 @@ function DragHandle(options: DragHandleOptions) {
 
           const rect = absoluteRect(node);
 
-          rect.top += (lineHeight - 24) / 2;
+          rect.top += (lineHeight - 14) / 2;
           rect.top += paddingTop;
           // Li markers
           if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
@@ -171,9 +171,15 @@ function DragHandle(options: DragHandleOptions) {
 
           if (!dragHandleElement) return;
 
-          dragHandleElement.style.left = `${rect.left - rect.width}px`;
-          dragHandleElement.style.top = `${rect.top}px`;
-          showDragHandle();
+          // Hide handle when mouse is on the left of the handle
+          const offsetToHide = rect.left - 25;
+          if (event.clientX < offsetToHide) {
+            hideDragHandle();
+          } else {
+            dragHandleElement.style.left = `${rect.left - rect.width}px`;
+            dragHandleElement.style.top = `${rect.top}px`;
+            showDragHandle();
+          }
         },
         keydown: () => {
           hideDragHandle();

packages/core/src/ui/editor/extensions/index.tsx

@@ -112,7 +112,7 @@ export const defaultExtensions = [
       if (node.type.name === "heading") {
         return `Heading ${node.attrs.level}`;
       }
-      return "Press '/' for commands, or '++' for AI autocomplete...";
+      return "Press '/' for commands...";
     },
     includeChildren: true,
   }),
@@ -135,7 +135,7 @@ export const defaultExtensions = [
     nested: true,
   }),
   Markdown.configure({
-    html: false,
+    html: true,
     transformCopiedText: true,
     transformPastedText: true,
   }),

packages/core/src/ui/editor/extensions/slash-command.tsx

@@ -76,21 +76,21 @@ const Command = Extension.create({
 
 const getSuggestionItems = ({ query }: { query: string }) => {
   return [
-    {
-      title: "Continue writing",
-      description: "Use AI to expand your thoughts.",
-      searchTerms: ["gpt"],
-      icon: <Magic className="novel-w-7" />,
-    },
-    {
-      title: "Send Feedback",
-      description: "Let us know how we can improve.",
-      icon: <MessageSquarePlus size={18} />,
-      command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).run();
-        window.open("/feedback", "_blank");
-      },
-    },
+    // {
+    //   title: "Continue writing",
+    //   description: "Use AI to expand your thoughts.",
+    //   searchTerms: ["gpt"],
+    //   icon: <Magic className="novel-w-7" />,
+    // },
+    // {
+    //   title: "Send Feedback",
+    //   description: "Let us know how we can improve.",
+    //   icon: <MessageSquarePlus size={18} />,
+    //   command: ({ editor, range }: CommandProps) => {
+    //     editor.chain().focus().deleteRange(range).run();
+    //     window.open("/feedback", "_blank");
+    //   },
+    // },
     {
       title: "Text",
       description: "Just start typing with plain text.",
@@ -196,27 +196,27 @@ const getSuggestionItems = ({ query }: { query: string }) => {
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
     },
-    {
-      title: "Image",
-      description: "Upload an image from your computer.",
-      searchTerms: ["photo", "picture", "media"],
-      icon: <ImageIcon size={18} />,
-      command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).run();
-        // upload image
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = "image/*";
-        input.onchange = async () => {
-          if (input.files?.length) {
-            const file = input.files[0];
-            const pos = editor.view.state.selection.from;
-            startImageUpload(file, editor.view, pos);
-          }
-        };
-        input.click();
-      },
-    },
+    // {
+    //   title: "Image",
+    //   description: "Upload an image from your computer.",
+    //   searchTerms: ["photo", "picture", "media"],
+    //   icon: <ImageIcon size={18} />,
+    //   command: ({ editor, range }: CommandProps) => {
+    //     editor.chain().focus().deleteRange(range).run();
+    //     // upload image
+    //     const input = document.createElement("input");
+    //     input.type = "file";
+    //     input.accept = "image/*";
+    //     input.onchange = async () => {
+    //       if (input.files?.length) {
+    //         const file = input.files[0];
+    //         const pos = editor.view.state.selection.from;
+    //         startImageUpload(file, editor.view, pos);
+    //       }
+    //     };
+    //     input.click();
+    //   },
+    // },
   ].filter((item) => {
     if (typeof query === "string" && query.length > 0) {
       const search = query.toLowerCase();
@@ -355,7 +355,7 @@ const CommandList = ({
       {items.map((item: CommandItemProps, index: number) => {
         return (
           <button
-            className={`novel-flex novel-w-full novel-items-center novel-space-x-2 novel-rounded-md novel-px-2 novel-py-1 novel-text-left novel-text-sm novel-text-stone-900 hover:novel-bg-stone-100 ${
+            className={`novel-flex novel-w-full novel-items-center novel-space-x-2 novel-rounded-md novel-border-transparent novel-bg-white novel-px-2 novel-py-1 novel-text-left novel-text-sm novel-text-stone-900 hover:novel-bg-stone-100 ${
               index === selectedIndex
                 ? "novel-bg-stone-100 novel-text-stone-900"
                 : ""

packages/core/src/ui/editor/index.tsx

@@ -102,28 +102,28 @@ export default function Editor({
       ...editorProps,
     },
     onUpdate: (e) => {
-      const selection = e.editor.state.selection;
-      const lastTwo = getPrevText(e.editor, {
-        chars: 2,
-      });
-      if (lastTwo === "++" && !isLoading) {
-        e.editor.commands.deleteRange({
-          from: selection.from - 2,
-          to: selection.from,
-        });
-        complete(
-          getPrevText(e.editor, {
-            chars: 5000,
-          })
-        );
-        // complete(e.editor.storage.markdown.getMarkdown());
-        va.track("Autocomplete Shortcut Used");
-      } else {
-        onUpdate(e.editor);
-        debouncedUpdates(e);
-      }
+      // const selection = e.editor.state.selection;
+      // const lastTwo = getPrevText(e.editor, {
+      //   chars: 2,
+      // });
+      // if (lastTwo === "++" && !isLoading) {
+      //   e.editor.commands.deleteRange({
+      //     from: selection.from - 2,
+      //     to: selection.from,
+      //   });
+      //   complete(
+      //     getPrevText(e.editor, {
+      //       chars: 5000,
+      //     })
+      //   );
+      //   // complete(e.editor.storage.markdown.getMarkdown());
+      //   va.track("Autocomplete Shortcut Used");
+      // } else {
+      onUpdate(e.editor);
+      debouncedUpdates(e);
+      // }
     },
-    autofocus: "end",
+    autofocus: false,
   });
 
   const { complete, completion, isLoading, stop } = useCompletion({

packages/core/tailwind.config.js

@@ -1,7 +1,10 @@
-const sharedConfig = require("tailwind-config/tailwind.config.js");
+const sharedConfig = require("../tailwind-config/tailwind.config.js");
 
 module.exports = {
   // prefix ui lib classes to avoid conflicting with the app
   ...sharedConfig,
   prefix: "novel-",
+  corePlugins: {
+    preflight: false,
+  },
 };

packages/core/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "tsconfig/react.json",
+  "extends": "../tsconfig/react.json",
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {