@threadlabs/looma 0.1.0 → 0.1.1

package/editor/extensions/index.d.ts

@@ -1,13 +1,9 @@
-import * as _tiptap_core from '@tiptap/core';
 import { AnyExtension, Editor, Range } from '@tiptap/core';
 import { a as TableOverlayActionEventDetail } from '../table-overlay-DTr3KC9e.js';
-import * as _tiptap_extension_table_cell from '@tiptap/extension-table-cell';
-import * as _tiptap_extension_table_header from '@tiptap/extension-table-header';
-import * as _tiptap_extension_table from '@tiptap/extension-table';
 
 /**
  * Default Tiptap extension preset for Looma editor.
- * Uses Vanilla JS Tiptap API; apps install @tiptap/core and extensions and pass this to Editor.
+ * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
  */
 
 interface DefaultEditorExtensionsOptions {
@@ -67,9 +63,9 @@ declare const TABLE_CELL_BACKGROUND_PRESETS: {
     readonly green: "#dcfce7";
     readonly red: "#fee2e2";
 };
-declare const LoomaTable: _tiptap_core.Node<_tiptap_extension_table.TableOptions, any>;
-declare const LoomaTableHeader: _tiptap_core.Node<_tiptap_extension_table_header.TableHeaderOptions, any>;
-declare const LoomaTableCell: _tiptap_core.Node<_tiptap_extension_table_cell.TableCellOptions, any>;
+declare const LoomaTable: AnyExtension;
+declare const LoomaTableHeader: AnyExtension;
+declare const LoomaTableCell: AnyExtension;
 declare function getActiveTableCellAlignment(editor: Editor): TableCellAlignment;
 declare function getActiveTableCellBackground(editor: Editor): TableCellBackground;
 declare function setActiveTableCellAlignment(editor: Editor, alignment: TableCellAlignment): boolean;

package/editor/extensions/index.js

@@ -11,7 +11,7 @@ import {
   normalizeActiveTableColumnWidths,
   setActiveTableCellAlignment,
   setActiveTableCellBackground
-} from "../chunk-JKRA4D4W.js";
+} from "../chunk-YGJLGDQC.js";
 export {
   LoomaTable,
   LoomaTableCell,

package/editor/index.d.ts

@@ -2,6 +2,3 @@ export { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDet
 export { T as TableOverlayAction, a as TableOverlayActionEventDetail } from './table-overlay-DTr3KC9e.js';
 export { DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaTable, LoomaTableCell, LoomaTableHeader, TABLE_CELL_BACKGROUND_PRESETS, TableCellAlignment, TableCellBackground, getActiveTableCellAlignment, getActiveTableCellBackground, getDefaultEditorExtensions, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground } from './extensions/index.js';
 import '@tiptap/core';
-import '@tiptap/extension-table-cell';
-import '@tiptap/extension-table-header';
-import '@tiptap/extension-table';

package/editor/index.js

@@ -12,7 +12,7 @@ import {
   normalizeActiveTableColumnWidths,
   setActiveTableCellAlignment,
   setActiveTableCellBackground
-} from "./chunk-JKRA4D4W.js";
+} from "./chunk-YGJLGDQC.js";
 export {
   LoomaTable,
   LoomaTableCell,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Looma web components, layout primitives, editor UI, and supported Vue adapters.",
   "license": "MIT",
@@ -95,140 +95,16 @@
   ],
   "peerDependencies": {
     "@tiptap/core": ">=2 <3",
-    "@tiptap/extension-blockquote": ">=2 <3",
-    "@tiptap/extension-bold": ">=2 <3",
-    "@tiptap/extension-bullet-list": ">=2 <3",
-    "@tiptap/extension-code": ">=2 <3",
-    "@tiptap/extension-code-block": ">=2 <3",
-    "@tiptap/extension-document": ">=2 <3",
-    "@tiptap/extension-dropcursor": ">=2 <3",
-    "@tiptap/extension-gapcursor": ">=2 <3",
-    "@tiptap/extension-hard-break": ">=2 <3",
-    "@tiptap/extension-heading": ">=2 <3",
-    "@tiptap/extension-highlight": ">=2 <3",
-    "@tiptap/extension-history": ">=2 <3",
-    "@tiptap/extension-horizontal-rule": ">=2 <3",
-    "@tiptap/extension-image": ">=2 <3",
-    "@tiptap/extension-italic": ">=2 <3",
-    "@tiptap/extension-link": ">=2 <3",
-    "@tiptap/extension-list-item": ">=2 <3",
-    "@tiptap/extension-ordered-list": ">=2 <3",
-    "@tiptap/extension-paragraph": ">=2 <3",
-    "@tiptap/extension-placeholder": ">=2 <3",
-    "@tiptap/extension-strike": ">=2 <3",
-    "@tiptap/extension-table": ">=2 <3",
-    "@tiptap/extension-table-cell": ">=2 <3",
-    "@tiptap/extension-table-header": ">=2 <3",
-    "@tiptap/extension-table-row": ">=2 <3",
-    "@tiptap/extension-task-item": ">=2 <3",
-    "@tiptap/extension-task-list": ">=2 <3",
-    "@tiptap/extension-text": ">=2 <3",
-    "@tiptap/extension-typography": ">=2 <3",
-    "@tiptap/extension-underline": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
-    "prosemirror-tables": "^1.8.5",
     "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
       "optional": true
     },
-    "@tiptap/extension-blockquote": {
-      "optional": true
-    },
-    "@tiptap/extension-bold": {
-      "optional": true
-    },
-    "@tiptap/extension-bullet-list": {
-      "optional": true
-    },
-    "@tiptap/extension-code": {
-      "optional": true
-    },
-    "@tiptap/extension-code-block": {
-      "optional": true
-    },
-    "@tiptap/extension-document": {
-      "optional": true
-    },
-    "@tiptap/extension-dropcursor": {
-      "optional": true
-    },
-    "@tiptap/extension-gapcursor": {
-      "optional": true
-    },
-    "@tiptap/extension-hard-break": {
-      "optional": true
-    },
-    "@tiptap/extension-heading": {
-      "optional": true
-    },
-    "@tiptap/extension-highlight": {
-      "optional": true
-    },
-    "@tiptap/extension-history": {
-      "optional": true
-    },
-    "@tiptap/extension-horizontal-rule": {
-      "optional": true
-    },
-    "@tiptap/extension-image": {
-      "optional": true
-    },
-    "@tiptap/extension-italic": {
-      "optional": true
-    },
-    "@tiptap/extension-link": {
-      "optional": true
-    },
-    "@tiptap/extension-list-item": {
-      "optional": true
-    },
-    "@tiptap/extension-ordered-list": {
-      "optional": true
-    },
-    "@tiptap/extension-paragraph": {
-      "optional": true
-    },
-    "@tiptap/extension-placeholder": {
-      "optional": true
-    },
-    "@tiptap/extension-strike": {
-      "optional": true
-    },
-    "@tiptap/extension-table": {
-      "optional": true
-    },
-    "@tiptap/extension-table-cell": {
-      "optional": true
-    },
-    "@tiptap/extension-table-header": {
-      "optional": true
-    },
-    "@tiptap/extension-table-row": {
-      "optional": true
-    },
-    "@tiptap/extension-task-item": {
-      "optional": true
-    },
-    "@tiptap/extension-task-list": {
-      "optional": true
-    },
-    "@tiptap/extension-text": {
-      "optional": true
-    },
-    "@tiptap/extension-typography": {
-      "optional": true
-    },
-    "@tiptap/extension-underline": {
-      "optional": true
-    },
     "@tiptap/pm": {
       "optional": true
     },
-    "prosemirror-tables": {
-      "optional": true
-    },
     "vue": {
       "optional": true
     }

package/editor/chunk-JKRA4D4W.js

@@ -1,435 +0,0 @@
-// 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
-};