@threadlabs/looma 0.1.0

package/editor/chunk-JKRA4D4W.js

@@ -0,0 +1,435 @@
+// src/extensions/preset.ts
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import Underline from "@tiptap/extension-underline";
+import Heading from "@tiptap/extension-heading";
+import BulletList from "@tiptap/extension-bullet-list";
+import OrderedList from "@tiptap/extension-ordered-list";
+import ListItem from "@tiptap/extension-list-item";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import Blockquote from "@tiptap/extension-blockquote";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import HardBreak from "@tiptap/extension-hard-break";
+import History from "@tiptap/extension-history";
+import Dropcursor from "@tiptap/extension-dropcursor";
+import Gapcursor from "@tiptap/extension-gapcursor";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import Highlight from "@tiptap/extension-highlight";
+import Typography from "@tiptap/extension-typography";
+import Placeholder from "@tiptap/extension-placeholder";
+import Code from "@tiptap/extension-code";
+import CodeBlock from "@tiptap/extension-code-block";
+import TableRow from "@tiptap/extension-table-row";
+
+// src/extensions/list-behavior.ts
+import { Extension } from "@tiptap/core";
+function isEmptyParagraphAtStart(editor) {
+  const { selection } = editor.state;
+  return selection.empty && selection.$from.parent.isTextblock && selection.$from.parent.content.size === 0 && selection.$from.parentOffset === 0;
+}
+var LoomaListBehavior = Extension.create({
+  name: "loomaListBehavior",
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        if (this.editor.isActive("taskItem")) {
+          return this.editor.commands.splitListItem("taskItem");
+        }
+        if (this.editor.isActive("listItem")) {
+          return this.editor.commands.splitListItem("listItem");
+        }
+        return false;
+      },
+      Backspace: () => {
+        if (!isEmptyParagraphAtStart(this.editor)) {
+          return false;
+        }
+        if (this.editor.isActive("taskItem")) {
+          return this.editor.commands.liftListItem("taskItem");
+        }
+        if (this.editor.isActive("listItem")) {
+          return this.editor.commands.liftListItem("listItem");
+        }
+        return false;
+      }
+    };
+  }
+});
+
+// src/extensions/table-formatting.ts
+import TableBase from "@tiptap/extension-table";
+import TableCellBase from "@tiptap/extension-table-cell";
+import TableHeaderBase from "@tiptap/extension-table-header";
+var TABLE_CELL_BACKGROUND_PRESETS = {
+  none: null,
+  gray: "#f3f4f6",
+  yellow: "#fef3c7",
+  blue: "#dbeafe",
+  green: "#dcfce7",
+  red: "#fee2e2"
+};
+var LoomaTable = TableBase.configure({
+  resizable: true,
+  lastColumnResizable: false
+});
+function normalizeTableCellAlignment(value) {
+  if (value === "left" || value === "center" || value === "right") {
+    return value;
+  }
+  return null;
+}
+function normalizeTableCellBackground(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : null;
+}
+function renderTableCellStyle(attributes) {
+  const styleFragments = [];
+  const textAlign = normalizeTableCellAlignment(attributes.textAlign);
+  const backgroundColor = normalizeTableCellBackground(attributes.backgroundColor);
+  if (textAlign && textAlign !== "left") {
+    styleFragments.push(`text-align: ${textAlign}`);
+  }
+  if (backgroundColor) {
+    styleFragments.push(`background-color: ${backgroundColor}`);
+  }
+  return styleFragments.length > 0 ? `${styleFragments.join("; ")};` : null;
+}
+var tableAlignmentAttributes = {
+  textAlign: {
+    default: null,
+    parseHTML: (element) => normalizeTableCellAlignment(element.style.textAlign),
+    renderHTML: (attributes) => {
+      const style = renderTableCellStyle(attributes);
+      return style ? { style } : {};
+    }
+  },
+  backgroundColor: {
+    default: null,
+    parseHTML: (element) => normalizeTableCellBackground(element.style.backgroundColor),
+    renderHTML: (attributes) => {
+      const style = renderTableCellStyle(attributes);
+      return style ? { style } : {};
+    }
+  }
+};
+var LoomaTableHeader = TableHeaderBase.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      ...tableAlignmentAttributes
+    };
+  }
+});
+var LoomaTableCell = TableCellBase.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      ...tableAlignmentAttributes
+    };
+  }
+});
+function getActiveTableCellAlignment(editor) {
+  const { $from } = editor.state.selection;
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    const node = $from.node(depth);
+    if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
+      return normalizeTableCellAlignment(node.attrs.textAlign) ?? "left";
+    }
+  }
+  return "left";
+}
+function getActiveTableCellBackground(editor) {
+  const { $from } = editor.state.selection;
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    const node = $from.node(depth);
+    if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
+      return normalizeTableCellBackground(node.attrs.backgroundColor);
+    }
+  }
+  return null;
+}
+function setActiveTableCellAlignment(editor, alignment) {
+  const textAlign = alignment === "left" ? null : alignment;
+  if (editor.isActive("tableHeader")) {
+    return editor.chain().focus().updateAttributes("tableHeader", { textAlign }).run();
+  }
+  if (editor.isActive("tableCell")) {
+    return editor.chain().focus().updateAttributes("tableCell", { textAlign }).run();
+  }
+  return false;
+}
+function setActiveTableCellBackground(editor, backgroundColor) {
+  const normalizedBackgroundColor = normalizeTableCellBackground(backgroundColor);
+  if (editor.isActive("tableHeader")) {
+    return editor.chain().focus().updateAttributes("tableHeader", {
+      backgroundColor: normalizedBackgroundColor
+    }).run();
+  }
+  if (editor.isActive("tableCell")) {
+    return editor.chain().focus().updateAttributes("tableCell", {
+      backgroundColor: normalizedBackgroundColor
+    }).run();
+  }
+  return false;
+}
+
+// src/extensions/preset.ts
+function getDefaultEditorExtensions(options = {}) {
+  const {
+    placeholder = "Type \u201C/\u201D for commands, or start writing\u2026",
+    linkOpenOnClick = false,
+    imageInline = false
+  } = options;
+  return [
+    Document,
+    Paragraph,
+    Text,
+    Bold,
+    Italic,
+    Strike,
+    Underline,
+    Heading.configure({ levels: [1, 2, 3] }),
+    BulletList,
+    OrderedList,
+    ListItem,
+    TaskList,
+    TaskItem.configure({ nested: false }),
+    Blockquote,
+    HorizontalRule,
+    HardBreak,
+    History,
+    Dropcursor,
+    Gapcursor,
+    Link.configure({
+      openOnClick: linkOpenOnClick,
+      HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" }
+    }),
+    Image.configure({ inline: imageInline }),
+    Highlight.configure({ multicolor: false }),
+    Code,
+    CodeBlock,
+    Typography,
+    Placeholder.configure({
+      placeholder: ({ node }) => node.type.name === "paragraph" ? placeholder : "",
+      emptyNodeClass: "is-editor-empty"
+    }),
+    LoomaTable,
+    TableRow,
+    LoomaTableHeader,
+    LoomaTableCell,
+    LoomaListBehavior
+  ];
+}
+
+// src/extensions/table-commands.ts
+import { TableMap } from "prosemirror-tables";
+function arrayEquals(left, right) {
+  if (!left || left.length !== right.length) {
+    return false;
+  }
+  return left.every((value, index) => value === right[index]);
+}
+function readRenderedColumnWidths(tableElement) {
+  const colElements = Array.from(tableElement.querySelectorAll("colgroup col"));
+  if (colElements.length > 0) {
+    return colElements.map((column) => Math.max(1, Math.round(column.getBoundingClientRect().width)));
+  }
+  const firstRow = tableElement.rows.item(0);
+  if (!firstRow) {
+    return [];
+  }
+  return Array.from(firstRow.cells).map((cell) => Math.max(1, Math.round(cell.getBoundingClientRect().width)));
+}
+function distributeWidthDelta(widths, availableWidth, minWidth) {
+  const normalized = [...widths];
+  let delta = availableWidth - normalized.reduce((sum, width) => sum + width, 0);
+  while (delta !== 0) {
+    const adjustableIndices = normalized.map((width, index) => ({ width, index })).filter(({ width }) => delta > 0 || width > minWidth).sort((left, right) => {
+      if (delta > 0) {
+        return left.width - right.width;
+      }
+      return right.width - left.width;
+    });
+    if (adjustableIndices.length === 0) {
+      break;
+    }
+    for (const { index } of adjustableIndices) {
+      if (delta === 0) {
+        break;
+      }
+      const currentWidth = normalized[index];
+      if (currentWidth === void 0) {
+        continue;
+      }
+      if (delta > 0) {
+        normalized[index] = currentWidth + 1;
+        delta -= 1;
+        continue;
+      }
+      if (currentWidth <= minWidth) {
+        continue;
+      }
+      normalized[index] = currentWidth - 1;
+      delta += 1;
+    }
+  }
+  return normalized;
+}
+function normalizeColumnWidths(widths, availableWidth, minWidth) {
+  if (widths.length === 0 || availableWidth <= 0) {
+    return widths;
+  }
+  const totalWidth = widths.reduce((sum, width) => sum + width, 0);
+  if (totalWidth <= 0) {
+    return widths;
+  }
+  const scaled = widths.map(
+    (width) => Math.max(minWidth, Math.round(width / totalWidth * availableWidth))
+  );
+  return distributeWidthDelta(scaled, availableWidth, minWidth);
+}
+function getTextPositionInCell(tablePos, table, rowIndex, colIndex) {
+  let pos = tablePos + 1;
+  for (let r = 0; r < rowIndex; r++) {
+    pos += table.child(r).nodeSize;
+  }
+  const row = table.child(rowIndex);
+  for (let c = 0; c < colIndex; c++) {
+    pos += row.child(c).nodeSize;
+  }
+  return pos + 3;
+}
+function findTable(editor) {
+  const { $from } = editor.state.selection;
+  for (let d = $from.depth; d > 0; d--) {
+    const node = $from.node(d);
+    if (node.type.name === "table") {
+      return { pos: $from.before(d), node };
+    }
+  }
+  return null;
+}
+function insertTableAtRange(editor, range, options = {}) {
+  const rows = Math.min(10, Math.max(1, options.rows ?? 3));
+  const cols = Math.min(10, Math.max(1, options.cols ?? 3));
+  const withHeaderRow = options.withHeaderRow ?? true;
+  return editor.chain().focus().deleteRange(range).insertTable({ rows, cols, withHeaderRow }).run();
+}
+function normalizeActiveTableColumnWidths(editor, tableElement, minWidth = 25) {
+  const tableInfo = findTable(editor);
+  if (!tableInfo) {
+    return false;
+  }
+  const renderedColumnWidths = readRenderedColumnWidths(tableElement);
+  if (renderedColumnWidths.length === 0) {
+    return false;
+  }
+  const availableWidth = Math.max(1, Math.round(tableElement.getBoundingClientRect().width));
+  const normalizedColumnWidths = normalizeColumnWidths(
+    renderedColumnWidths,
+    availableWidth,
+    minWidth
+  );
+  const { pos: tablePos, node: table } = tableInfo;
+  const map = TableMap.get(table);
+  const tableStart = tablePos + 1;
+  let tr = editor.state.tr;
+  let changed = false;
+  for (let row = 0; row < map.height; row += 1) {
+    for (let col = 0; col < map.width; col += 1) {
+      const mapIndex = row * map.width + col;
+      const cellPos = map.map[mapIndex];
+      if (cellPos === void 0) {
+        continue;
+      }
+      if (col > 0 && map.map[mapIndex - 1] === cellPos || row > 0 && map.map[mapIndex - map.width] === cellPos) {
+        continue;
+      }
+      const cellNode = table.nodeAt(cellPos);
+      if (!cellNode) {
+        continue;
+      }
+      const startCol = map.colCount(cellPos);
+      const cellWidths = normalizedColumnWidths.slice(startCol, startCol + cellNode.attrs.colspan);
+      if (cellWidths.length !== cellNode.attrs.colspan || arrayEquals(cellNode.attrs.colwidth, cellWidths)) {
+        continue;
+      }
+      tr = tr.setNodeMarkup(tableStart + cellPos, null, {
+        ...cellNode.attrs,
+        colwidth: cellWidths
+      });
+      changed = true;
+    }
+  }
+  if (changed) {
+    editor.view.dispatch(tr);
+  }
+  return changed;
+}
+function handleTableOverlayAction(editor, detail) {
+  const tableInfo = findTable(editor);
+  if (!tableInfo) return false;
+  const { action, boundaryIndex } = detail;
+  const { pos: tablePos, node: table } = tableInfo;
+  const rows = table.childCount;
+  const cols = rows > 0 ? table.child(0).childCount : 0;
+  let cellPos;
+  let command;
+  switch (action) {
+    case "add-row-before": {
+      const rowIndex = Math.min(boundaryIndex, rows - 1);
+      if (rowIndex < 0) return false;
+      cellPos = getTextPositionInCell(tablePos, table, rowIndex, 0);
+      command = () => editor.chain().focus().setTextSelection(cellPos).addRowBefore().run();
+      break;
+    }
+    case "add-row-after": {
+      const rowIndex = Math.min(boundaryIndex, rows - 1);
+      if (rowIndex < 0) return false;
+      cellPos = getTextPositionInCell(tablePos, table, rowIndex, 0);
+      command = () => editor.chain().focus().setTextSelection(cellPos).addRowAfter().run();
+      break;
+    }
+    case "add-column-before": {
+      const colIndex = Math.min(boundaryIndex, cols - 1);
+      if (colIndex < 0) return false;
+      cellPos = getTextPositionInCell(tablePos, table, 0, colIndex);
+      command = () => editor.chain().focus().setTextSelection(cellPos).addColumnBefore().run();
+      break;
+    }
+    case "add-column-after": {
+      const colIndex = Math.min(boundaryIndex, cols - 1);
+      if (colIndex < 0) return false;
+      cellPos = getTextPositionInCell(tablePos, table, 0, colIndex);
+      command = () => editor.chain().focus().setTextSelection(cellPos).addColumnAfter().run();
+      break;
+    }
+    default:
+      return false;
+  }
+  return command();
+}
+
+export {
+  TABLE_CELL_BACKGROUND_PRESETS,
+  LoomaTable,
+  LoomaTableHeader,
+  LoomaTableCell,
+  getActiveTableCellAlignment,
+  getActiveTableCellBackground,
+  setActiveTableCellAlignment,
+  setActiveTableCellBackground,
+  getDefaultEditorExtensions,
+  insertTableAtRange,
+  normalizeActiveTableColumnWidths,
+  handleTableOverlayAction
+};