ctrl-enter behavior, table exit,

Author: iamdabe

src/blazer-markdown-editor.css

@@ -53,3 +53,85 @@
   padding: 4px 16px;
   color: #555;
 }
+
+.table-toolbar,
+.link-toolbar {
+  position: absolute;
+  z-index: 100;
+  background: #fff;
+  border: 1px solid #d0d0d0;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  padding: 4px;
+  display: flex;
+  gap: 2px;
+}
+.table-toolbar button,
+.link-toolbar button {
+  padding: 4px 8px;
+  border: none;
+  background: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  white-space: nowrap;
+  color: #333;
+  font-family: inherit;
+}
+.table-toolbar button:hover,
+.link-toolbar button:hover {
+  background: #f0f0ff;
+}
+.table-toolbar .sep {
+  width: 1px;
+  background: #e0e0e0;
+  margin: 2px 3px;
+}
+.table-toolbar .danger:hover {
+  background: #fff0f0;
+  color: #c00;
+}
+
+.slash-menu {
+  position: absolute;
+  z-index: 100;
+  background: #fff;
+  border: 1px solid #d0d0d0;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  padding: 4px;
+  min-width: 220px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.slash-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.slash-menu-item:hover,
+.slash-menu-item.active {
+  background: #f0f0ff;
+}
+.slash-menu-item .icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f0f0;
+  border-radius: 5px;
+  font-size: 15px;
+  flex-shrink: 0;
+}
+.slash-menu-item .label {
+  font-weight: 500;
+}
+.slash-menu-item .desc {
+  font-size: 12px;
+  color: #888;
+}

src/blazer-markdown-editor.js

@@ -33,7 +33,6 @@ import {
   setBlockType,
   wrapIn,
   chainCommands,
-  exitCode,
   newlineInCode,
   createParagraphNear,
   liftEmptyBlock,
@@ -288,6 +287,9 @@ function tableInputRulePlugin() {
 
         const table = buildTableNode(tableRange.headerCells, tableRange.aligns);
         const tr = state.tr.replaceWith(tableRange.from, tableRange.to, table);
+        const afterTable = tr.mapping.map(tableRange.from) + table.nodeSize;
+        tr.insert(afterTable, schema.node("paragraph"));
+        tr.setSelection(TextSelection.near(tr.doc.resolve(afterTable + 1)));
         view.dispatch(tr);
         event.preventDefault();
         return true;
@@ -367,8 +369,12 @@ function tableCellEnterCommand(state, dispatch) {
 
 function compactLineBreak(state, dispatch) {
   const { $head } = state.selection;
-  if ($head.parent.type.name !== "paragraph") return false;
-  if (dispatch) dispatch(state.tr.insertText("\n"));
+  if ($head.parent.type.name === "code_block") {
+    if (dispatch) dispatch(state.tr.insertText("\n"));
+    return true;
+  }
+  if (!$head.parent.inlineContent) return false;
+  if (dispatch) dispatch(state.tr.replaceSelectionWith(schema.nodes.hard_break.create()).scrollIntoView());
   return true;
 }
 
@@ -431,6 +437,13 @@ function pastePlugin() {
 // ── Floating Table Toolbar ──
 function tableToolbarPlugin() {
   let toolbarEl = null;
+  let blurHandler = null;
+  let focusHandler = null;
+
+  function hideToolbar() {
+    if (toolbarEl) toolbarEl.style.display = "none";
+  }
+
   function createToolbar() {
     const el = document.createElement("div");
     el.className = "table-toolbar";
@@ -452,6 +465,29 @@ function tableToolbarPlugin() {
   }
   const cmds = { addColumnBefore, addColumnAfter, deleteColumn,
                  addRowBefore, addRowAfter, deleteRow, deleteTable };
+
+  function positionForSelection(view) {
+    if (!view.hasFocus()) { hideToolbar(); return; }
+
+    const $h = view.state.selection.$head;
+    let inTbl = false;
+    let tblDom = null;
+    for (let d = $h.depth; d > 0; d--) {
+      if ($h.node(d).type.name === "table") {
+        inTbl = true;
+        tblDom = view.nodeDOM($h.before(d));
+        break;
+      }
+    }
+
+    if (!inTbl || !tblDom) { hideToolbar(); return; }
+
+    const r = tblDom.getBoundingClientRect();
+    toolbarEl.style.display = "flex";
+    toolbarEl.style.left = r.left + "px";
+    toolbarEl.style.top = (r.top - toolbarEl.offsetHeight - 6 + window.scrollY) + "px";
+  }
+
   return new Plugin({
     view(editorView) {
       toolbarEl = createToolbar();
@@ -460,29 +496,128 @@ function tableToolbarPlugin() {
         const btn = e.target.closest("button[data-cmd]");
         if (btn) { const c = cmds[btn.dataset.cmd]; if (c) c(editorView.state, editorView.dispatch); }
       });
+
+      blurHandler = () => hideToolbar();
+      focusHandler = () => requestAnimationFrame(() => positionForSelection(editorView));
+      editorView.dom.addEventListener("focusout", blurHandler);
+      editorView.dom.addEventListener("focusin", focusHandler);
+
       return {
         update(view) {
-          const $h = view.state.selection.$head;
-          let inTbl = false, tblDom = null;
-          for (let d = $h.depth; d > 0; d--) {
-            if ($h.node(d).type.name === "table") {
-              inTbl = true;
-              tblDom = view.nodeDOM($h.before(d));
-              break;
-            }
-          }
-          if (!inTbl || !tblDom) { toolbarEl.style.display = "none"; return; }
-          const r = tblDom.getBoundingClientRect();
-          toolbarEl.style.display = "flex";
-          toolbarEl.style.left = r.left + "px";
-          toolbarEl.style.top  = (r.top - toolbarEl.offsetHeight - 6 + window.scrollY) + "px";
+          positionForSelection(view);
         },
-        destroy() { if (toolbarEl) toolbarEl.remove(); }
+        destroy() {
+          if (blurHandler) editorView.dom.removeEventListener("focusout", blurHandler);
+          if (focusHandler) editorView.dom.removeEventListener("focusin", focusHandler);
+          if (toolbarEl) toolbarEl.remove();
+        }
       };
     }
   });
 }
 
+// ── Floating Link Toolbar ──
+function linkToolbarPlugin() {
+  let toolbarEl = null;
+  let currentHref = "";
+  let blurHandler = null;
+  let focusHandler = null;
+
+  function hideToolbar() {
+    if (toolbarEl) toolbarEl.style.display = "none";
+    currentHref = "";
+  }
+
+  function getActiveLinkHref(state) {
+    const { selection } = state;
+    const linkMarkType = schema.marks.link;
+    if (!linkMarkType) return null;
+
+    if (selection.empty) {
+      const { $from } = selection;
+      const marks = $from.marks();
+      const direct = marks.find((m) => m.type === linkMarkType);
+      if (direct?.attrs?.href) return direct.attrs.href;
+
+      const before = $from.nodeBefore;
+      if (before?.marks) {
+        const m = before.marks.find((mark) => mark.type === linkMarkType);
+        if (m?.attrs?.href) return m.attrs.href;
+      }
+
+      const after = $from.nodeAfter;
+      if (after?.marks) {
+        const m = after.marks.find((mark) => mark.type === linkMarkType);
+        if (m?.attrs?.href) return m.attrs.href;
+      }
+
+      return null;
+    }
+
+    let href = null;
+    state.doc.nodesBetween(selection.from, selection.to, (node) => {
+      if (!node.isText || !node.marks || href) return;
+      const mark = node.marks.find((m) => m.type === linkMarkType);
+      if (mark?.attrs?.href) href = mark.attrs.href;
+    });
+    return href;
+  }
+
+  function createToolbar() {
+    const el = document.createElement("div");
+    el.className = "link-toolbar";
+    el.innerHTML = `<button type="button" data-cmd="openLink">Open Link</button>`;
+    el.style.display = "none";
+    document.body.appendChild(el);
+    el.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      if (!currentHref) return;
+      window.open(currentHref, "_blank", "noopener,noreferrer");
+    });
+    return el;
+  }
+
+  function positionForSelection(view) {
+    if (!view.hasFocus()) {
+      hideToolbar();
+      return;
+    }
+
+    const href = getActiveLinkHref(view.state);
+    if (!href) {
+      hideToolbar();
+      return;
+    }
+
+    currentHref = href;
+    const coords = view.coordsAtPos(view.state.selection.from);
+    toolbarEl.style.display = "flex";
+    toolbarEl.style.left = coords.left + "px";
+    toolbarEl.style.top = (coords.top - toolbarEl.offsetHeight - 6 + window.scrollY) + "px";
+  }
+
+  return new Plugin({
+    view(editorView) {
+      toolbarEl = createToolbar();
+      blurHandler = () => hideToolbar();
+      focusHandler = () => requestAnimationFrame(() => positionForSelection(editorView));
+      editorView.dom.addEventListener("focusout", blurHandler);
+      editorView.dom.addEventListener("focusin", focusHandler);
+
+      return {
+        update(view) {
+          positionForSelection(view);
+        },
+        destroy() {
+          if (blurHandler) editorView.dom.removeEventListener("focusout", blurHandler);
+          if (focusHandler) editorView.dom.removeEventListener("focusin", focusHandler);
+          if (toolbarEl) toolbarEl.remove();
+        },
+      };
+    },
+  });
+}
+
 // ── Slash Command Menu ──
 const slashKey = new PluginKey("slashMenu");
 const SLASH_ITEMS = [
@@ -509,13 +644,16 @@ const SLASH_ITEMS = [
       if (!d) return true;
       const hdr = () => schema.nodes.table_header.createAndFill();
       const cel = () => schema.nodes.table_cell.createAndFill();
-      d(s.tr.replaceSelectionWith(
-        schema.nodes.table.create(null,[
-          schema.nodes.table_row.create(null,[hdr(),hdr(),hdr()]),
-          schema.nodes.table_row.create(null,[cel(),cel(),cel()]),
-          schema.nodes.table_row.create(null,[cel(),cel(),cel()]),
-        ])
-      ));
+      const table = schema.nodes.table.create(null,[
+        schema.nodes.table_row.create(null,[hdr(),hdr(),hdr()]),
+        schema.nodes.table_row.create(null,[cel(),cel(),cel()]),
+        schema.nodes.table_row.create(null,[cel(),cel(),cel()]),
+      ]);
+      const tr = s.tr.replaceSelectionWith(table);
+      const afterTable = tr.selection.from;
+      tr.insert(afterTable, schema.node("paragraph"));
+      tr.setSelection(TextSelection.near(tr.doc.resolve(afterTable + 1)));
+      d(tr.scrollIntoView());
       return true;
     } },
 ];
@@ -547,6 +685,8 @@ function slashMenuPlugin() {
     menuEl.querySelectorAll(".slash-menu-item").forEach(el => {
       el.addEventListener("mousedown", e => { e.preventDefault(); execute(view, items[+el.dataset.i]); });
     });
+    const activeEl = menuEl.querySelector(".slash-menu-item.active");
+    if (activeEl) activeEl.scrollIntoView({ block: "nearest" });
   }
   function execute(view, item) {
     view.dispatch(view.state.tr.delete(slashPos, view.state.selection.from));
@@ -627,7 +767,8 @@ function createPlugins() {
       "Mod-z": undo,
       "Shift-Mod-z": redo,
       "Mod-y": redo,
-      "Mod-Enter": chainCommands(exitCode, compactLineBreak),
+      "Mod-Enter": compactLineBreak,
+      "Shift-Enter": compactLineBreak,
       Enter: chainCommands(
         newlineInCode,
         tableCellEnterCommand,
@@ -646,6 +787,7 @@ function createPlugins() {
     tableEditing(),
     keymap({ Tab: goToNextCell(1), "Shift-Tab": goToNextCell(-1) }),
     tableToolbarPlugin(),
+    linkToolbarPlugin(),
     pastePlugin(),
   ];
 }