rimecms 0.22.0

package/dist/fields/rich-text/core/svelte/node-view-renderer.svelte.js

@@ -0,0 +1,173 @@
+import { Editor, getRenderedAttributes, NodeView } from '@tiptap/core';
+import { NodeSelection } from '@tiptap/pm/state';
+import { mount } from 'svelte';
+import { TIPTAP_NODE_VIEW } from './constant.js';
+import SvelteRenderer from './renderer.js';
+const invariant = (condition, msg) => {
+    if (!condition) {
+        throw new Error(msg);
+    }
+};
+class SvelteNodeView extends NodeView {
+    mount() {
+        const Component = this.component;
+        const props = $state({
+            editor: this.editor,
+            node: this.node,
+            decorations: this.decorations,
+            innerDecorations: this.innerDecorations,
+            view: this.view,
+            selected: false,
+            extension: this.extension,
+            HTMLAttributes: this.HTMLAttributes,
+            getPos: () => this.getPos(),
+            updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+            deleteNode: () => this.deleteNode()
+        });
+        this.contentDOMElement = this.node.isLeaf ? null : document.createElement(this.node.isInline ? 'span' : 'div');
+        if (this.contentDOMElement) {
+            // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
+            // With this fix it seems to work fine
+            // See: https://github.com/ueberdosis/tiptap/issues/1197
+            this.contentDOMElement.style.whiteSpace = 'inherit';
+        }
+        const context = new Map();
+        context.set(TIPTAP_NODE_VIEW, {
+            onDragStart: this.onDragStart.bind(this)
+        });
+        const as = this.options.as ?? (this.node.isInline ? 'span' : 'div');
+        const target = document.createElement(as);
+        target.classList.add(`node-${this.node.type.name}`);
+        this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+        this.editor.on('selectionUpdate', this.handleSelectionUpdate);
+        target.addEventListener('click', () => {
+            // Create a NodeSelection for this node
+            const nodeSelection = NodeSelection.create(this.editor.state.doc, this.getPos() || 0);
+            // Dispatch a transaction to update the selection
+            this.editor.view.dispatch(this.editor.state.tr.setSelection(nodeSelection));
+            // Focus the editor
+            this.editor.view.focus();
+        });
+        const svelteComponent = mount(Component, { target, props, context });
+        this.renderer = new SvelteRenderer(svelteComponent, {
+            element: target,
+            props
+        });
+        this.appendContendDom();
+        this.updateElementAttributes();
+    }
+    appendContendDom() {
+        const contentElement = this.dom.querySelector('[data-node-view-content]');
+        if (this.contentDOMElement && contentElement && !contentElement.contains(this.contentDOMElement)) {
+            contentElement.appendChild(this.contentDOMElement);
+        }
+    }
+    get dom() {
+        invariant(this.renderer.dom.firstElementChild?.hasAttribute('data-node-view-wrapper'), 'Please use the NodeViewWrapper component for your node view.');
+        return this.renderer.dom;
+    }
+    get contentDOM() {
+        if (this.node.isLeaf) {
+            return null;
+        }
+        return this.contentDOMElement;
+    }
+    handleSelectionUpdate() {
+        const { from, to } = this.editor.state.selection;
+        const pos = this.getPos();
+        if (typeof pos !== 'number') {
+            return;
+        }
+        if (from <= pos && to >= pos + this.node.nodeSize) {
+            if (this.renderer.props.selected) {
+                return;
+            }
+            this.selectNode();
+        }
+        else {
+            if (!this.renderer.props.selected) {
+                return;
+            }
+            this.deselectNode();
+        }
+    }
+    update(node, decorations, innerDecorations) {
+        const updateProps = (props) => {
+            this.renderer.updateProps(props);
+            if (typeof this.options.attrs === 'function') {
+                this.updateElementAttributes();
+            }
+        };
+        if (typeof this.options.update === 'function') {
+            const oldNode = this.node;
+            const oldDecorations = this.decorations;
+            const oldInnerDecorations = this.innerDecorations;
+            this.node = node;
+            this.decorations = decorations;
+            this.innerDecorations = innerDecorations;
+            return this.options.update({
+                oldNode,
+                oldDecorations,
+                oldInnerDecorations,
+                newNode: node,
+                newDecorations: decorations,
+                newInnerDecorations: innerDecorations,
+                updateProps: () => updateProps({
+                    node,
+                    decorations: decorations,
+                    innerDecorations
+                })
+            });
+        }
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
+            return true;
+        }
+        this.node = node;
+        this.decorations = decorations;
+        this.innerDecorations = innerDecorations;
+        updateProps({
+            node,
+            decorations: decorations,
+            innerDecorations
+        });
+        return true;
+    }
+    selectNode() {
+        this.renderer.updateProps({ selected: true });
+        this.renderer.dom.classList.add('ProseMirror-selectednode');
+    }
+    deselectNode() {
+        this.renderer.updateProps({ selected: false });
+        this.renderer.dom.classList.remove('ProseMirror-selectednode');
+    }
+    destroy() {
+        this.renderer.destroy();
+        this.editor.off('selectionUpdate', this.handleSelectionUpdate);
+        this.contentDOMElement = null;
+    }
+    /**
+     * Update the attributes of the top-level element that holds the React component.
+     * Applying the attributes defined in the `attrs` option.
+     */
+    updateElementAttributes() {
+        if (this.options.attrs) {
+            let attrsObj = {};
+            if (typeof this.options.attrs === 'function') {
+                const extensionAttributes = this.editor.extensionManager.attributes;
+                const HTMLAttributes = getRenderedAttributes(this.node, extensionAttributes);
+                attrsObj = this.options.attrs({ node: this.node, HTMLAttributes });
+            }
+            else {
+                attrsObj = this.options.attrs;
+            }
+            this.renderer.updateAttributes(attrsObj);
+        }
+    }
+}
+const SvelteNodeViewRenderer = (component, options) => {
+    return (props) => new SvelteNodeView(component, props, options);
+};
+export default SvelteNodeViewRenderer;

package/dist/fields/rich-text/core/svelte/node-view-wrapper.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" generics="T extends keyof SvelteHTMLElements = 'div'">
+	import { getContext, onMount, tick } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { TiptapNodeViewContext } from '../types';
+	import { TIPTAP_NODE_VIEW } from './constant.js';
+
+	type Props = SvelteHTMLElements[T] & {
+		as?: T;
+	};
+
+	const { as = 'div' as T, children, ...rest }: Props = $props();
+
+	const { onDragStart } = getContext<TiptapNodeViewContext>(TIPTAP_NODE_VIEW);
+	let element: HTMLElement;
+
+	onMount(async () => {
+		await tick();
+		element.style.whiteSpace = 'normal';
+	});
+</script>
+
+<svelte:element this={as} bind:this={element} data-node-view-wrapper role="none" {...rest} ondragstart={onDragStart}>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>

package/dist/fields/rich-text/core/svelte/node-view-wrapper.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements = 'div'> {
+    props(): SvelteHTMLElements[T] & {
+        as?: T | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends keyof SvelteHTMLElements = 'div'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends keyof SvelteHTMLElements = 'div'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NodeViewWrapper: $$IsomorphicComponent;
+type NodeViewWrapper<T extends keyof SvelteHTMLElements = 'div'> = InstanceType<typeof NodeViewWrapper<T>>;
+export default NodeViewWrapper;

package/dist/fields/rich-text/core/svelte/renderer.d.ts

@@ -0,0 +1,17 @@
+import { mount } from 'svelte';
+import type { NodeViewProps } from '@tiptap/core';
+interface RendererOptions {
+    element: HTMLElement;
+    props: NodeViewProps;
+}
+type App = ReturnType<typeof mount>;
+declare class SvelteRenderer {
+    component: App;
+    props: NodeViewProps;
+    dom: HTMLElement;
+    constructor(component: App, { element, props }: RendererOptions);
+    updateProps(props: Partial<NodeViewProps>): void;
+    updateAttributes(attributes: Record<string, string>): void;
+    destroy(): void;
+}
+export default SvelteRenderer;

package/dist/fields/rich-text/core/svelte/renderer.js

@@ -0,0 +1,24 @@
+import { mount, unmount } from 'svelte';
+class SvelteRenderer {
+    component;
+    props;
+    dom;
+    constructor(component, { element, props }) {
+        this.component = component;
+        this.props = props;
+        this.dom = element;
+        this.dom.classList.add('svelte-renderer');
+    }
+    updateProps(props) {
+        Object.assign(this.props, props);
+    }
+    updateAttributes(attributes) {
+        Object.keys(attributes).forEach((key) => {
+            this.dom.setAttribute(key, attributes[key]);
+        });
+    }
+    destroy() {
+        unmount(this.component);
+    }
+}
+export default SvelteRenderer;

package/dist/fields/rich-text/core/types.d.ts

@@ -0,0 +1,69 @@
+import type { IconProps } from '@lucide/svelte';
+import type { Editor, EditorOptions, JSONContent, Range } from '@tiptap/core';
+import type { Component, Snippet } from 'svelte';
+import type { RichTextContext } from '../component/context.svelte.js';
+export type RichTextFeatureType = 'mark' | 'node';
+export type RichTextFeatureSuggestion = {
+    command: (args: {
+        editor: Editor;
+        range?: Range;
+    }) => void;
+};
+export type RichTextFeature = {
+    extension?: EditorOptions['extensions'][number];
+    marks?: RichTextFeatureMark[];
+    nodes?: RichTextFeatureNode[];
+};
+export type RichTextFeatureMark = Omit<RichTextFeatureNode, 'nodeSelector'>;
+export type RichTextFeatureNode = {
+    label: string;
+    icon: Component<IconProps>;
+    isActive?: (args: {
+        editor: Editor;
+        range?: Range;
+    }) => boolean;
+    nodeSelector?: {
+        command: (args: {
+            editor: Editor;
+            range?: Range;
+        }) => void;
+    };
+    bubbleMenu?: {
+        command?: (args: {
+            editor: Editor;
+            range?: Range;
+        }) => void;
+        component?: Component<{
+            editor: Editor;
+            path: string;
+            active: boolean;
+            context: RichTextContext;
+            options?: any;
+        }>;
+    };
+    suggestion?: {
+        command: (args: {
+            editor: Editor;
+            range?: Range;
+        }) => void;
+    };
+};
+export type RichTextEditorConfig = {
+    tiptap: Partial<EditorOptions>;
+    features: RichTextFeature[];
+};
+export interface TiptapNodeViewContext {
+    onDragStart: (event: DragEvent) => void;
+}
+export type ComponentInputProps<T> = Partial<T> & {
+    editor: Editor;
+    class?: string;
+    children?: Snippet;
+};
+export type RichTextNodeRendererProps = {
+    node: JSONContent;
+    components?: Record<string, RichTextNodeRenderer>;
+    children?: Snippet;
+};
+export type RichTextNodeRenderer = Component<RichTextNodeRendererProps>;
+export type { RichTextContext };

package/dist/fields/rich-text/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/fields/rich-text/index.d.ts

@@ -0,0 +1,49 @@
+import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
+import type { DefaultValueFn, FormField } from '../types.js';
+import type { JSONContent } from '@tiptap/core';
+import type { RichTextFeature } from './core/types.js';
+export declare class RichTextFieldBuilder extends FormFieldBuilder<RichTextField> {
+    _metaUrl: string;
+    constructor(name: string);
+    get component(): import("svelte").Component<import("./component/props").RichTextFieldProps, {}, "">;
+    get cell(): import("svelte").Component<{
+        value: string;
+    }, {}, "">;
+    /**
+     * Sets a custom TipTap editor configuration for the rich text field.
+     *
+     * @param param - a feature name, a RichTextFeature object, or a shortcut config string
+     *
+     * @example
+     * // Using predefined features
+     * richText('intro').features('bold', 'heading', 'link')
+     *
+     * // Using custom features
+     * richText('intro').features(myCustomFeature)
+     *
+     */
+    features(...features: Array<RichTextFeature>): this;
+    static readonly jsonParse: (value: string) => string;
+    static readonly stringify: (value: string) => string;
+    defaultValue(value: RichTextContent | DefaultValueFn<RichTextContent>): this;
+}
+export declare const richText: (name: string) => RichTextFieldBuilder;
+/**
+ * Converts rich text JSON content to plain text.
+ * Extracts text content from a TipTap/ProseMirror JSON structure.
+ *
+ * @example
+ * // Returns "Hello world"
+ * richTextJSONToText('{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello world"}]}]}');
+ */
+export declare const richTextJSONToText: (value: string | JSONContent) => string;
+type RichTextContent = {
+    type: 'doc';
+    content: JSONContent[];
+};
+export type RichTextField = FormField & {
+    type: 'richText';
+    features?: Array<RichTextFeature>;
+    defaultValue?: RichTextContent | DefaultValueFn<RichTextContent>;
+};
+export {};

package/dist/fields/rich-text/index.js

@@ -0,0 +1,124 @@
+import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
+import Cell from './component/Cell.svelte';
+import RichText from './component/RichText.svelte';
+const isEmpty = (value) => {
+    const reduceText = (prev, curr) => {
+        if ('text' in curr) {
+            prev += curr.text;
+        }
+        else if ('content' in curr) {
+            return curr.content.reduce(reduceText, prev);
+        }
+        return prev;
+    };
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        Object.getPrototypeOf(value) === Object.prototype &&
+        'content' in value &&
+        Array.isArray(value.content) &&
+        value.content.reduce(reduceText, '') === '');
+};
+export class RichTextFieldBuilder extends FormFieldBuilder {
+    //
+    _metaUrl = import.meta.url;
+    constructor(name) {
+        super(name, 'richText');
+        this.field.isEmpty = isEmpty;
+        this.field.hooks = {
+            beforeRead: [RichTextFieldBuilder.jsonParse],
+            beforeSave: [RichTextFieldBuilder.stringify],
+            beforeValidate: []
+        };
+    }
+    get component() {
+        return RichText;
+    }
+    get cell() {
+        return Cell;
+    }
+    /**
+     * Sets a custom TipTap editor configuration for the rich text field.
+     *
+     * @param param - a feature name, a RichTextFeature object, or a shortcut config string
+     *
+     * @example
+     * // Using predefined features
+     * richText('intro').features('bold', 'heading', 'link')
+     *
+     * // Using custom features
+     * richText('intro').features(myCustomFeature)
+     *
+     */
+    features(...features) {
+        this.field.features = features;
+        return this;
+    }
+    static jsonParse = (value) => {
+        try {
+            value = JSON.parse(value, (key, val) => {
+                if (key === 'text')
+                    return String(val);
+                return val;
+            });
+        }
+        catch (err) {
+            console.log(err);
+            if (typeof value === 'string') {
+                return value;
+            }
+            return '';
+        }
+        return value;
+    };
+    static stringify = (value) => {
+        if (typeof value === 'string')
+            return value;
+        try {
+            value = JSON.stringify(value);
+        }
+        catch (err) {
+            console.error(err.message);
+        }
+        return value;
+    };
+    defaultValue(value) {
+        this.field.defaultValue = value;
+        return this;
+    }
+}
+export const richText = (name) => new RichTextFieldBuilder(name);
+/**
+ * Converts rich text JSON content to plain text.
+ * Extracts text content from a TipTap/ProseMirror JSON structure.
+ *
+ * @example
+ * // Returns "Hello world"
+ * richTextJSONToText('{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello world"}]}]}');
+ */
+export const richTextJSONToText = (value) => {
+    if (!value)
+        return '';
+    let textValue;
+    const renderNodes = (nodes) => {
+        return nodes
+            .map((node) => {
+            if ('text' in node) {
+                return node.text;
+            }
+            else if ('content' in node) {
+                return renderNodes(node.content);
+            }
+        })
+            .join(' ');
+    };
+    try {
+        const jsonContent = typeof value === 'string' ? JSON.parse(value) : value;
+        textValue = renderNodes(jsonContent.content);
+    }
+    catch (err) {
+        console.error(err);
+        textValue = JSON.stringify(value);
+    }
+    return textValue;
+};

package/dist/fields/rich-text/index.server.d.ts

@@ -0,0 +1,4 @@
+import type { RichTextFieldBuilder } from './index.js';
+import type { ToSchema, ToType } from '../index.server.js';
+export declare const toSchema: ToSchema<RichTextFieldBuilder>;
+export declare const toType: ToType<RichTextFieldBuilder>;

package/dist/fields/rich-text/index.server.js

@@ -0,0 +1,12 @@
+import { templateUniqueRequired } from '../../adapter-sqlite/generate-schema/templates.server.js';
+import { getSchemaColumnNames } from '../../adapter-sqlite/generate-schema/util.js';
+export const toSchema = (field, parentPath) => {
+    const { camel, snake } = getSchemaColumnNames({ name: field.name, parentPath });
+    const suffix = templateUniqueRequired(field.raw);
+    if (field._generateSchema)
+        return field._generateSchema({ camel, snake, suffix });
+    return `${camel}: text('${snake}')${suffix}`;
+};
+export const toType = (field) => {
+    return `${field.name}${field.raw.required ? '' : '?'}: import('@tiptap/core').JSONContent`;
+};

package/dist/fields/rich-text/util.d.ts

@@ -0,0 +1,5 @@
+import type { RichTextFeature } from '../../types.js';
+/**
+ * Check that in given features at least one has a suggestion
+ */
+export declare function hasSuggestion(features: RichTextFeature[]): boolean;

package/dist/fields/rich-text/util.js

@@ -0,0 +1,8 @@
+/**
+ * Check that in given features at least one has a suggestion
+ */
+export function hasSuggestion(features) {
+    return !!features.filter((feature) => {
+        return feature.marks?.some((mark) => !!mark.suggestion) || feature.nodes?.some((node) => !!node.suggestion);
+    }).length;
+}