@flexiui/svelte-rich-text 0.0.24 → 0.0.25

package/dist/extensions/extensions.js

@@ -0,0 +1,86 @@
+import StarterKit from "@tiptap/starter-kit";
+import Highlight from "@tiptap/extension-highlight";
+import TextAlign from "@tiptap/extension-text-align";
+import Image from "@tiptap/extension-image";
+import { ListKit } from "@tiptap/extension-list";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import { Mathematics } from "@tiptap/extension-mathematics";
+import { Audio } from "./Audio";
+import { NodeLineHeight } from "./NodeLineHeight";
+import { EnhancedLink } from "./EnhancedLink";
+import katex from "katex";
+/**
+ * Fuente única de extensiones
+ */
+export function createExtensions({ customExtensions = [], editable = true, } = {}) {
+    return [
+        Highlight.configure({ multicolor: true }),
+        TextStyleKit,
+        StarterKit.configure({
+            trailingNode: false,
+            link: false,
+            bulletList: false,
+            listItem: false,
+            orderedList: false,
+            listKeymap: false,
+        }),
+        EnhancedLink,
+        Audio.configure({
+            HTMLAttributes: { class: "audio-player" },
+        }),
+        Image.configure({
+            inline: true,
+        }),
+        ListKit,
+        TextAlign.configure({
+            types: [
+                "heading",
+                "paragraph",
+                "bulletList",
+                "taskList",
+                "listItem",
+                "blockquote",
+            ],
+        }),
+        Mathematics.extend({
+            renderHTML({ node }) {
+                const latex = node.attrs.latex ?? "";
+                return [
+                    "span",
+                    {
+                        class: "math-inline",
+                        innerHTML: katex.renderToString(latex, {
+                            throwOnError: false,
+                        }),
+                    },
+                ];
+            },
+        }).configure({
+            katexOptions: {
+                displayMode: false,
+                throwOnError: false,
+                macros: {
+                    "\\RR": "\\mathbb{R}",
+                    "\\ZZ": "\\mathbb{Z}",
+                },
+            },
+            inlineOptions: editable
+                ? {
+                    onClick: (node, pos) => {
+                        const latex = prompt("Update LaTeX:", node.attrs.latex);
+                        if (latex) {
+                            this.editor
+                                .chain()
+                                .setNodeSelection(pos)
+                                .updateInlineMath({ latex })
+                                .focus()
+                                .run();
+                        }
+                    },
+                }
+                : {},
+        }),
+        NodeLineHeight,
+        ...customExtensions,
+    ];
+}

package/dist/styles.css

@@ -172,6 +172,77 @@
       pointer-events: none;
     }
   }
+
+  /* Table-specific styling */
+  .tableWrapper table {
+    border-collapse: collapse;
+    margin: 0;
+    overflow: hidden;
+    table-layout: fixed;
+    width: calc(100% - 12px);
+    margin-left: 12px;
+    margin-top: 12px;
+    min-width: 100px;
+    overflow-y: hidden;
+    overflow-x: auto;
+
+    td,
+    th {
+      border: 1px solid #6e6e6e;
+      box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
+      position: relative;
+      vertical-align: top;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      background-color: #f0f0f030;
+      font-weight: bold;
+      text-align: left;
+    }
+
+    .selectedCell:after {
+      background: #e0e0e024;
+      content: '';
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+    }
+
+    .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
+      position: absolute;
+      right: -2px;
+      top: 0;
+      width: 4px;
+    }
+  }
+
+  .fl-table-cell-content > div > * {
+    margin-bottom: 0;
+  }
+
+  .tableWrapper {
+    overflow-x: auto;
+    padding: 0 14px 14px;
+    margin: 24px -14px 0px;
+  }
+
+  &.resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
 }
 
 .fl-rich-text-content {
@@ -452,4 +523,115 @@
   .fl-range-element-value {
     padding: 0 6px;
     font-size: 14px;
+}
+
+.ProseMirror-selectednode {
+    outline: 2px solid #535bf2;
+}
+
+
+.media-grid-view-content {
+  --fl-grid-cols: 2;
+  --fl-grid-gap: 1rem;
+  --fl-grid-item-radius: 16px;
+
+  & > div {
+    display: grid;
+    grid-template-columns: repeat(var(--fl-grid-cols), 1fr);
+    gap: var(--fl-grid-gap);
+  }
+}
+
+/* .fl-grid {
+  --fl-grid-cols: 2;
+  --fl-grid-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(var(--fl-grid-cols), 1fr);
+  gap: .75rem;
+} */
+
+.fl-media-grid-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+
+  & .fl-media-grid-item-content {
+    aspect-ratio: 16 / 9;
+  }
+
+  & img {
+    object-fit: cover;
+    border-radius: var(--fl-grid-item-radius);
+    width: 100%;
+  }
+
+  & .fl-grid-indicator {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #535bf2;
+    border-radius: 100%;
+    color: #fff;
+    font-weight: 600;
+    font-size: 14px;
+  }
+}
+
+.media-grid-item-view-content {
+  aspect-ratio: 16 / 9;
+  /* outline: 1px dashed #eeeeee3d; */
+  width: 100%;
+
+  a {
+    width: 100%;
+  }
+}
+
+.media-grid-item-view-content > div {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+
+  a {
+    display: flex;
+  }
+}
+
+
+.node-MediaGridComponent {
+    margin: 1.75rem 0;
+}
+
+.fl-media-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--fl-grid-cols), 1fr);
+  gap: var(--fl-grid-gap);
+  margin: 2rem 0;
+
+  & .fl-grid-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--fl-grid-item-radius);
+
+    & .fl-grid-item-content {
+      aspect-ratio: 16 / 9;
+    }
+
+    & img {
+      object-fit: cover;
+      border-radius: var(--fl-grid-item-radius);
+      width: 100%;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexiui/svelte-rich-text",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",