fix: Divider, element inserts

vriteio · Jul 4, 2024 · 560e279 · 560e279
1 parent 62259f6
commit 560e279
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 30 deletions.
diff --git a/apps/web/src/lib/editor/extensions/element/node.tsx b/apps/web/src/lib/editor/extensions/element/node.tsx
@@ -605,6 +605,7 @@ const Element = BaseElement.extend<
     };
   },
   addInputRules() {
+    const { editor } = this;
     const getAttributes = (input: ExtendedRegExpMatchArray): Record<string, any> => {
       const [code] = input;
       const tagRegex = /^<(\w+?)(?:\s|\n|\/|>)/;
@@ -622,12 +623,15 @@ const Element = BaseElement.extend<
 
       if (blockRange) {
         tr.setMeta("elementInserted", { pos: blockRange.start });
+        requestAnimationFrame(() => {
+          editor.chain().setElementSelection(blockRange.start).focus().run();
+        });
       }
     };
 
     return [
       nodeInputRule({
-        find: /^<.*?.+?\/>$/,
+        find: /(^<.*?.+?\/>$)/,
         type: this.type,
         getAttributes,
         appendTransaction

diff --git a/apps/web/src/lib/editor/extensions/element/xml-node-view.tsx b/apps/web/src/lib/editor/extensions/element/xml-node-view.tsx
@@ -101,6 +101,7 @@ const xmlNodeView = ({
     const { selection } = editor.state;
     const selectionPos = selection.$from.pos;
 
+    code.style.minHeight = "unset";
     if (pos === null) return { selected: false, active: false };
 
     if (
@@ -122,7 +123,9 @@ const xmlNodeView = ({
       isElementSelection(selection) &&
       !isElementSelectionActive(selection)
     ) {
-      if (!node.content.size) code.append(selectionBackground);
+      if (!node.content.size) {
+        wrapper.append(selectionBackground);
+      }
 
       contentContainer.classList.add("!border-primary");
       code.classList.remove("selected-element-code");

diff --git a/apps/web/src/lib/editor/extensions/xml-node-menu/component.tsx b/apps/web/src/lib/editor/extensions/xml-node-menu/component.tsx
@@ -1,5 +1,4 @@
 import { ElementMenuEditor } from "./editor";
-import { ElementSelection, isElementSelection } from "../element/selection";
 import { SolidEditor } from "@vrite/tiptap-solid";
 import { Component, Show, createEffect, createSignal } from "solid-js";
 import { Node as PMNode } from "@tiptap/pm/model";

diff --git a/apps/web/src/lib/editor/extensions/xml-node-menu/editor.tsx b/apps/web/src/lib/editor/extensions/xml-node-menu/editor.tsx
@@ -215,6 +215,7 @@ const ElementMenuEditor = lazy(async () => {
             return;
           }
 
+          // TODO: Handle word wrap
           if (code) {
             code.textContent = value;
             requestAnimationFrame(() => {

diff --git a/packages/editor/src/element.ts b/packages/editor/src/element.ts
@@ -84,33 +84,6 @@ const Element = Node.create({
         };
       }
     };
-  },
-  addInputRules() {
-    const getAttributes = (input: ExtendedRegExpMatchArray): Record<string, any> => {
-      const [code] = input;
-      const tagRegex = /^<(\w+?)(?:\s|\n|\/|>)/;
-      const [, tag] = tagRegex.exec(code.trim()) || [];
-
-      if (tag && tag !== "undefined") {
-        return { type: tag, props: {} };
-      }
-
-      return {};
-    };
-
-    return [
-      nodeInputRule({
-        find: /^<.*?.+?\/>$/,
-        type: this.type,
-        getAttributes
-      }),
-      wrappingInputRule({
-        find: /^<.*?.+?>$/,
-        type: this.type,
-        joinPredicate: () => false,
-        getAttributes
-      })
-    ];
   }
 });
 

diff --git a/packages/editor/src/horizontal-rule.ts b/packages/editor/src/horizontal-rule.ts
@@ -1,7 +1,16 @@
+import { nodeInputRule } from "./node-input-rule";
 import { nodePasteRule } from "./node-paste-rule";
 import { HorizontalRule as BaseHorizontalRule } from "@tiptap/extension-horizontal-rule";
 
 const HorizontalRule = BaseHorizontalRule.extend({
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        type: this.type
+      })
+    ];
+  },
   addPasteRules() {
     return [
       nodePasteRule({