tetrons 2.1.6 → 2.1.8

package/dist/components/tetrons/toolbar/extensions/Embed.js

@@ -0,0 +1,90 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+export const Embed = Node.create({
+    name: "embed",
+    group: "block",
+    atom: true,
+    addAttributes() {
+        return {
+            src: { default: null },
+            width: { default: 560 },
+            height: { default: 315 },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "iframe[src]" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["iframe", mergeAttributes(HTMLAttributes)];
+    },
+    addCommands() {
+        return {
+            setEmbed: ((attributes) => {
+                return ({ chain }) => {
+                    return chain()
+                        .insertContent({
+                        type: this.name,
+                        attrs: attributes,
+                    })
+                        .run();
+                };
+            }).bind(this),
+        };
+    },
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const container = document.createElement('div');
+            container.style.position = 'relative';
+            container.style.display = 'inline-block';
+            container.style.width = node.attrs.width + 'px';
+            container.style.height = node.attrs.height + 'px';
+            const iframe = document.createElement('iframe');
+            iframe.setAttribute('src', node.attrs.src);
+            iframe.setAttribute('frameborder', '0');
+            iframe.setAttribute('allowfullscreen', 'true');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            container.appendChild(iframe);
+            const handle = document.createElement('div');
+            handle.style.position = 'absolute';
+            handle.style.width = '16px';
+            handle.style.height = '16px';
+            handle.style.right = '0';
+            handle.style.bottom = '0';
+            handle.style.cursor = 'se-resize';
+            handle.style.background = 'rgba(0,0,0,0.5)';
+            handle.style.borderRadius = '2px';
+            container.appendChild(handle);
+            let startX, startY, startWidth, startHeight;
+            const onMouseDown = (event) => {
+                event.preventDefault();
+                startX = event.clientX;
+                startY = event.clientY;
+                startWidth = container.offsetWidth;
+                startHeight = container.offsetHeight;
+                window.addEventListener('mousemove', onMouseMove);
+                window.addEventListener('mouseup', onMouseUp);
+            };
+            const onMouseMove = (event) => {
+                const newWidth = Math.max(100, startWidth + (event.clientX - startX));
+                const newHeight = Math.max(100, startHeight + (event.clientY - startY));
+                container.style.width = newWidth + 'px';
+                container.style.height = newHeight + 'px';
+            };
+            const onMouseUp = () => {
+                window.removeEventListener("mousemove", onMouseMove);
+                window.removeEventListener("mouseup", onMouseUp);
+                editor.commands.command(({ tr }) => {
+                    tr.setNodeMarkup(getPos(), undefined, Object.assign(Object.assign({}, node.attrs), { width: container.offsetWidth, height: container.offsetHeight }));
+                    return true;
+                });
+            };
+            handle.addEventListener('mousedown', onMouseDown);
+            return {
+                dom: container,
+                destroy() {
+                    handle.removeEventListener('mousedown', onMouseDown);
+                }
+            };
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/FontFamily.d.ts

@@ -0,0 +1,9 @@
+import { Mark } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontFamily: {
+            setFontFamily: (font: string) => ReturnType;
+        };
+    }
+}
+export declare const FontFamily: Mark<any, any>;

package/dist/components/tetrons/toolbar/extensions/FontFamily.js

@@ -0,0 +1,28 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+export const FontFamily = Mark.create({
+    name: 'fontFamily',
+    addAttributes() {
+        return {
+            font: {
+                default: null,
+                parseHTML: element => element.style.fontFamily.replace(/['"]/g, ''),
+                renderHTML: attributes => {
+                    if (!attributes.font)
+                        return {};
+                    return { style: `font-family: ${attributes.font}` };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [{ style: 'font-family' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['span', mergeAttributes(HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            setFontFamily: font => ({ commands }) => commands.setMark(this.name, { font }),
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/FontSize.d.ts

@@ -0,0 +1,9 @@
+import { Mark } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        fontSize: {
+            setFontSize: (size: string) => ReturnType;
+        };
+    }
+}
+export declare const FontSize: Mark<any, any>;

package/dist/components/tetrons/toolbar/extensions/FontSize.js

@@ -0,0 +1,28 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+export const FontSize = Mark.create({
+    name: "fontSize",
+    addAttributes() {
+        return {
+            size: {
+                default: null,
+                parseHTML: (element) => element.style.fontSize,
+                renderHTML: (attributes) => {
+                    if (!attributes.size)
+                        return {};
+                    return { style: `font-size: ${attributes.size}` };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [{ style: "font-size" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["span", mergeAttributes(HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            setFontSize: (size) => ({ commands }) => commands.setMark(this.name, { size }),
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/ResizableTable.d.ts

@@ -0,0 +1 @@
+export declare const ResizableTable: import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any>;

package/dist/components/tetrons/toolbar/extensions/ResizableTable.js

@@ -0,0 +1,11 @@
+import { Table } from "@tiptap/extension-table";
+import { columnResizing, tableEditing } from "prosemirror-tables";
+export const ResizableTable = Table.extend({
+    addOptions() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { resizable: true });
+    },
+    addProseMirrorPlugins() {
+        return [columnResizing({ handleWidth: 5 }), tableEditing()];
+    },
+});

package/dist/components/tetrons/toolbar/marks/Subscript.d.ts

@@ -0,0 +1,2 @@
+import { Mark } from "@tiptap/core";
+export declare const Subscript: Mark<any, any>;

package/dist/components/tetrons/toolbar/marks/Subscript.js

@@ -0,0 +1,35 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+export const Subscript = Mark.create({
+    name: "subscript",
+    excludes: "superscript",
+    parseHTML() {
+        return [{ tag: "sub" }, { style: "vertical-align: sub" }];
+    },
+    renderHTML() {
+        return ["sub", 0];
+    },
+    addCommands() {
+        return {
+            toggleSubscript: () => ({ chain }) => chain()
+                .unsetMark("superscript")
+                .toggleMark(this.name)
+                .run(),
+        };
+    },
+    addInputRules() {
+        return [
+            markInputRule({
+                find: /~([^~]+)~/,
+                type: this.type,
+            }),
+        ];
+    },
+    addPasteRules() {
+        return [
+            markPasteRule({
+                find: /~([^~]+)~/g,
+                type: this.type,
+            }),
+        ];
+    },
+});

package/dist/components/tetrons/toolbar/marks/Superscript.d.ts

@@ -0,0 +1,2 @@
+import { Mark } from "@tiptap/core";
+export declare const Superscript: Mark<any, any>;

package/dist/components/tetrons/toolbar/marks/Superscript.js

@@ -0,0 +1,35 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+export const Superscript = Mark.create({
+    name: "superscript",
+    excludes: "subscript",
+    parseHTML() {
+        return [{ tag: "sup" }, { style: "vertical-align: super" }];
+    },
+    renderHTML() {
+        return ["sup", 0];
+    },
+    addCommands() {
+        return {
+            toggleSuperscript: () => ({ chain }) => chain()
+                .unsetMark("subscript")
+                .toggleMark(this.name)
+                .run(),
+        };
+    },
+    addInputRules() {
+        return [
+            markInputRule({
+                find: /\^([^^]+)\^/,
+                type: this.type,
+            }),
+        ];
+    },
+    addPasteRules() {
+        return [
+            markPasteRule({
+                find: /\^([^^]+)\^/g,
+                type: this.type,
+            }),
+        ];
+    },
+});

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as react from 'react';
+import React from 'react';
 
-declare function EditorContent(): react.JSX.Element;
+declare function EditorContent(): React.JSX.Element;
 
 export { EditorContent, EditorContent as default };

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import * as react from 'react';
-
-declare function EditorContent(): react.JSX.Element;
-
-export { EditorContent, EditorContent as default };
+export { default as EditorContent } from "./components/tetrons/EditorContent";
+import EditorContent from "./components/tetrons/EditorContent";
+export default EditorContent;