@flexiui/svelte-rich-text 0.0.24 → 0.0.26

package/dist/extensions/AudioPlayerWrapper.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { NodeViewWrapper } from 'svelte-tiptap'
+  import type { NodeViewProps } from '@tiptap/core'
+  import AudioPlayer from './AudioPlayer.svelte';
+  import { onDestroy } from 'svelte';
+
+  export let node: NodeViewProps['node']
+  export let selected: NodeViewProps['selected'] // 👈 aquí
+  export let getPos: NodeViewProps['getPos']
+  export let editor: NodeViewProps['editor']
+
+  const attrs = node.attrs
+
+  export let targetElement: any = null;
+
+  let minWidth = 316;
+  let maxWidth = "100%";
+
+  let startX = 0;
+  let startWidth = 0;
+
+  function onMouseDown(e: MouseEvent) {
+    e.preventDefault();
+
+    if (!targetElement) return;
+
+    startX = e.clientX;
+    startWidth = targetElement.offsetWidth;
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  }
+
+  function onMouseMove(e: MouseEvent) {
+    if (!targetElement) return;
+
+    // 🔥 Obtenemos el DOM node de ProseMirror
+    const domNode = editor.view.nodeDOM(getPos()) as HTMLElement
+
+    const deltaX = (e.clientX - startX); 
+    let newWidth = startWidth + deltaX;
+
+    if (newWidth < minWidth) {
+      newWidth = minWidth;
+    }
+
+    domNode.style.maxWidth = `${newWidth}px`;
+
+  }
+
+  function onMouseUp() {
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+  }
+
+  onDestroy(() => {
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+  });
+</script>
+
+<NodeViewWrapper class="fl-audio-player-wrapper">
+  <div
+    bind:this={targetElement}
+    class="fl-audio-player"
+    class:selected={selected}
+    style="
+      --color-play: {attrs.colorPlay};
+      --color-bar: {attrs.colorBar};
+    "
+  >
+    <!-- <audio
+      src={attrs.src}
+      controls={attrs.controls}
+      autoplay={attrs.autoplay}
+      loop={attrs.loop}
+    ></audio> -->
+
+    <AudioPlayer src={attrs.src}></AudioPlayer>
+
+    {#if selected}
+        <span
+        class="resize-grab"
+        role="button"
+        tabindex="0"
+        aria-label="Arrastra para cambiar el tamaño"
+        contenteditable="false"
+        on:mousedown={onMouseDown}
+        >
+        </span>
+    {/if}
+  </div> 
+</NodeViewWrapper>
+
+<style>
+  .fl-audio-player {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .resize-grab {
+    position: absolute;
+    right: -4px;
+    width: 6px;
+    background: #535bf2;
+    height: 50%;
+    border-radius: 13px;
+    cursor: col-resize;
+    display: flex;
+    align-items: center;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        left: -4px;
+        background: inherit;
+        border-radius: 100%;
+    }
+}
+</style>

package/dist/extensions/AudioPlayerWrapper.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NodeViewProps } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        node: NodeViewProps["node"];
+        selected: NodeViewProps["selected"];
+        getPos: NodeViewProps["getPos"];
+        editor: NodeViewProps["editor"];
+        targetElement?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AudioPlayerWrapperProps = typeof __propDef.props;
+export type AudioPlayerWrapperEvents = typeof __propDef.events;
+export type AudioPlayerWrapperSlots = typeof __propDef.slots;
+export default class AudioPlayerWrapper extends SvelteComponentTyped<AudioPlayerWrapperProps, AudioPlayerWrapperEvents, AudioPlayerWrapperSlots> {
+}
+export {};

package/dist/extensions/MediaGrid/MediaGrid.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const MediaGridExtension: Node<any, any>;

package/dist/extensions/MediaGrid/MediaGrid.js

@@ -0,0 +1,90 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import MediaGridComponent from './MediaGrid.svelte';
+export const MediaGridExtension = Node.create({
+    name: 'MediaGridComponent',
+    group: 'block',
+    content: 'gridItem+',
+    defining: true,
+    addAttributes() {
+        return {
+            class: {
+                default: "fl-media-grid",
+                parseHTML: element => element.getAttribute('class') || null,
+                renderHTML: attributes => {
+                    if (!attributes.class)
+                        return {};
+                    return { class: attributes.class };
+                },
+            },
+            cols: {
+                default: 2,
+                parseHTML: element => parseInt(element.getAttribute('data-cols') || '2', 10),
+                renderHTML: attrs => ({ 'data-cols': attrs.cols }),
+            },
+            gap: {
+                default: '1rem',
+                parseHTML: element => element.getAttribute('data-gap') || '1rem',
+                renderHTML: attrs => ({ 'data-gap': attrs.gap }),
+            },
+            showIndicator: {
+                default: false,
+                parseHTML: element => element.getAttribute('data-show-indicator') || false,
+                renderHTML: attrs => ({ 'data-show-indicator': attrs.showIndicator }),
+            },
+            indicatorType: {
+                default: 'numeric', // 'numeric' | 'alphabetic'
+                parseHTML: element => element.getAttribute('data-indicator-type') || 'numeric',
+                renderHTML: attrs => ({ 'data-indicator-type': attrs.indicatorType }),
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'media-grid-component' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            insertGrid: (options) => ({ tr, state, dispatch }) => {
+                const { schema } = state;
+                const cols = options?.cols || 2;
+                // const items = Array.from({ length: cols }, () =>
+                //   schema.nodes.gridItem.create(
+                //     null,
+                //     schema.nodes.image.create({ src: 'https://placehold.co/800x400' })
+                //   )
+                // )
+                const items = Array.from({ length: cols }, () => schema.nodes.gridItem.create() // 👈 sin contenido
+                );
+                const grid = this.type.create({ cols }, items);
+                if (dispatch) {
+                    tr.replaceSelectionWith(grid).scrollIntoView();
+                    dispatch(tr);
+                }
+                return true;
+            },
+            addGridItem: () => ({ tr, state, dispatch }) => {
+                const { schema, selection } = state;
+                const { $from } = selection;
+                for (let depth = $from.depth; depth > 0; depth--) {
+                    const node = $from.node(depth);
+                    if (node.type.name === this.name) {
+                        if (dispatch) {
+                            const pos = $from.end(depth) - 1;
+                            const gridItem = schema.nodes.gridItem.create();
+                            tr.insert(pos, gridItem).scrollIntoView();
+                            dispatch(tr);
+                        }
+                        return true;
+                    }
+                }
+                return false;
+            },
+        };
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(MediaGridComponent);
+    },
+});

package/dist/extensions/MediaGrid/MediaGrid.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+  import type { NodeViewProps } from "@tiptap/core";
+  import cx from "clsx";
+  import { NodeViewContent, NodeViewWrapper } from "svelte-tiptap";
+
+  const { node, updateAttributes, selected, getPos, editor }: NodeViewProps = $props();
+
+  let cols = $state(node.attrs.cols || 2);
+  let gap = $state(node.attrs.gap || 1);
+  let showIndicator = $state(node.attrs.showIndicator || false);
+  let indicatorType = $state(node.attrs.indicatorType || 'numeric');
+
+  function handleColsChange(e) {
+    cols = e.target.value;
+    updateAttributes({ cols });
+  }
+
+  function handleGapChange(e) {
+    gap = e.target.value;
+    updateAttributes({ gap });
+  }
+
+  function handleShowIndicatorChange(e) {
+    showIndicator = e.target.checked;
+    updateAttributes({ showIndicator });
+  }
+
+  function handleIndicatorTypeChange(e) {
+    indicatorType = e.target.value;
+    updateAttributes({ indicatorType });
+  }
+</script>
+
+<NodeViewWrapper
+  id="svelte-component"
+  data-selected={selected}
+  class={cx("fl-editor-custom-component svelte-component")}
+  data-drag-handle=""
+>
+  <div class="flex fl-editor-component-header" contentEditable={false}>
+
+    <button
+    class="fl-add-grid-item-btn"
+    onclick={() => {
+      const pos = getPos();
+      if (typeof pos === "number") {
+        // Coloca el cursor dentro del grid (contentDOM)
+        editor
+          .chain()
+          .focus()
+          .setTextSelection(pos + 1) // 👈 entra dentro del content
+          .addGridItem()
+          .run();
+      } else {
+        editor.chain().focus().addGridItem().run();
+      }
+    }}
+  >
+    Add grid item
+  </button>
+
+    <div class="fl-editor-component-options">
+      <div class="fl-editor-component-option">
+        <label>
+          <span class="fl-editor-component-option-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-columns"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6l5.5 0"></path><path d="M4 10l5.5 0"></path><path d="M4 14l5.5 0"></path><path d="M4 18l5.5 0"></path><path d="M14.5 6l5.5 0"></path><path d="M14.5 10l5.5 0"></path><path d="M14.5 14l5.5 0"></path><path d="M14.5 18l5.5 0"></path></svg>
+          </span>
+          <input
+            class="fl-editor-option-input input-number option--cols"
+            oninput={handleColsChange}
+            type="number"
+            id="cols"
+            value={cols}
+            min="1"
+            max="10"
+            step="1"
+          />
+        </label>
+      </div>
+
+      <div class="fl-editor-component-option">
+        <label>
+          <span class="fl-editor-component-option-icon">
+            <svg  xmlns="http://www.w3.org/2000/svg"  width="19"  height="19"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-spacing-horizontal"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 20h-2a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h2" /><path d="M4 20h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M12 8v8" /></svg>
+          </span>
+          <input
+            class="fl-editor-option-input input-text option--gap"
+            oninput={handleGapChange}
+            type="text"
+            id="gap"
+            value={gap}
+          />
+        </label>
+      </div>
+
+      <div class="fl-editor-component-option m-l-small">
+        <label>
+          <input
+            class="fl-editor-option-input input-checkbox option--show-indicator"
+            oninput={handleShowIndicatorChange}
+            type="checkbox"
+            id="show-indicator"
+            value={showIndicator}
+          />
+          Show indicators
+        </label>
+      </div>
+
+      {#if showIndicator}
+        <div class="fl-editor-component-option">
+          <label>
+            <select id="indicator-type" value={indicatorType} onchange={handleIndicatorTypeChange}>
+              <option value="numeric">Numeric</option>
+              <option value="alphabetic">Alphabetic</option>
+            </select>
+          </label>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+
+    <!-- <div class="fl-grid" >
+      {#each Array(node.childCount) as _, i}
+      <div class="fl-grid-item">
+        <span class="fl-grid-item-badge">
+          {i + 1}
+        </span>
+        <img src="https://template.tiptap.dev/images/tiptap-ui-placeholder-image.jpg" alt="Imagen de ejemplo" />
+        <div class="fl-grid-item-actions">
+          <button type="button" onclick={() => {
+            editor.commands.addGridItem();
+          }}>
+            Add
+          </button>
+        </div>
+      </div>
+      {/each}
+      
+  </div> -->
+
+  <NodeViewContent 
+  class="media-grid-view-content" 
+  style="
+  --fl-grid-cols: {cols};
+  --fl-grid-gap: {gap};
+  "
+  />
+
+  
+
+  <!-- <div class="fl-editor-component-option">
+    <button type="button" onclick={addItem}> Add item </button>
+  </div> -->
+  
+</NodeViewWrapper>
+
+
+
+<style>
+  .placeholder {
+    opacity: 0.4;
+    border: 1px dashed #aaa;
+  }
+
+  .fl-editor-component-header {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 1rem;
+  }
+
+  .fl-add-grid-item-btn {
+    padding: 6px 15px;
+    border-radius: 12px;
+    border: none;
+    background: #6b6b6b;
+  }
+
+  .fl-editor-component-options {
+        display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #ffffffc2;
+    background-color: #2a2a2a00;
+    backdrop-filter: blur(10px);
+    padding: 6px 8px;
+    border-radius: 12px;
+  }
+
+  .fl-editor-component-option {
+    & label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    & .fl-editor-component-option-icon {
+      display: flex;
+    }
+
+    &.m-l-small {
+      margin-left: 4px;
+    }
+
+    select {
+      background-color: #131313;
+      border: none;
+      padding: 3px 2px;
+      outline: none;
+
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .fl-editor-option-input {
+
+    &.input-number, &.input-text {
+      border: none;
+      background: #7e7e7e80;
+      padding: 6px 7px;
+      border-radius: 8px;
+    }
+
+    &.option--cols {
+      width: 32px;
+    }
+
+    &.option--gap {
+      width: 74px;
+    }
+
+    &.input-checkbox {
+      width: 15px;
+      margin: 0;
+      height: 15px;
+      accent-color: #535bf2;
+    }
+    
+  }
+
+  .fl-grid-item-badge {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    background: #535bf2;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    border-radius: 100%;
+}
+
+  .fl-grid-item-actions {
+    display: flex;
+    gap: 10px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+</style>

package/dist/extensions/MediaGrid/MediaGrid.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MediaGridProps = typeof __propDef.props;
+export type MediaGridEvents = typeof __propDef.events;
+export type MediaGridSlots = typeof __propDef.slots;
+export default class MediaGrid extends SvelteComponentTyped<MediaGridProps, MediaGridEvents, MediaGridSlots> {
+}
+export {};

package/dist/extensions/MediaGrid/MediaGridItem.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const MediaGridItemExtension: Node<any, any>;

package/dist/extensions/MediaGrid/MediaGridItem.js

@@ -0,0 +1,24 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import MediaGridItemComponent from './MediaGridItem.svelte';
+export const MediaGridItemExtension = Node.create({
+    name: 'gridItem',
+    content: 'image?', // 👈 solo permite un nodo image
+    selectable: true,
+    parseHTML() {
+        return [{ tag: 'div[data-type="grid-item"]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'grid-item',
+                class: 'fl-grid-item',
+            }),
+            0,
+        ];
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(MediaGridItemComponent);
+    },
+});