@flexiui/svelte-rich-text 0.0.24 → 0.0.26

package/dist/AudioPlayerSimple.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let name;
+    export let src;
+</script>
+
+<h1>Hello {name} audio player!</h1>
+<audio src={src} controls></audio>

package/dist/AudioPlayerSimple.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  AudioPlayerSimpleProps */
+/** @typedef {typeof __propDef.events}  AudioPlayerSimpleEvents */
+/** @typedef {typeof __propDef.slots}  AudioPlayerSimpleSlots */
+export default class AudioPlayerSimple extends SvelteComponentTyped<{
+    name: any;
+    src: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AudioPlayerSimpleProps = typeof __propDef.props;
+export type AudioPlayerSimpleEvents = typeof __propDef.events;
+export type AudioPlayerSimpleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: any;
+        src: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/RichText.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
+  import { CustomTableHeader } from "./extensions/Table/CustomTableHeader";
+  import { CustomTableCell } from "./extensions/Table/CustomTableCell";
+  import { TableKit } from "@tiptap/extension-table";
+  import { CellSelection } from "prosemirror-tables";
+
 	import { NodeLineHeight } from './extensions/NodeLineHeight';
+  import { MediaGridExtension } from "./extensions/MediaGrid/MediaGrid";
+  import { MediaGridItemExtension } from "./extensions/MediaGrid/MediaGridItem";
   import {
     Mathematics,
     migrateMathStrings,
@@ -16,8 +23,8 @@
   import StarterKit from "@tiptap/starter-kit";
   import Highlight from "@tiptap/extension-highlight";
   import TextAlign from "@tiptap/extension-text-align";
-  import Underline from "@tiptap/extension-underline";
-  import Link from "@tiptap/extension-link";
+  import Image from "@tiptap/extension-image";
+  import { Audio } from "./extensions/Audio";
   import { ListKit } from "@tiptap/extension-list";
   import { TextStyleKit } from "@tiptap/extension-text-style";
   import { EnhancedLink } from "./extensions/EnhancedLink";
@@ -83,6 +90,12 @@
       listKeymap: false,
     }),
     EnhancedLink,
+    Audio.configure({
+      HTMLAttributes: { class: "audio-player" },
+    }),
+    Image.configure({
+      inline: true,
+    }),
     ListKit,
     TextAlign.configure({
       types: [
@@ -126,6 +139,20 @@
       },
     }),
     NodeLineHeight,
+    MediaGridExtension,
+    MediaGridItemExtension,
+    TableKit.configure({
+      table: {
+        HTMLAttributes: { class: "fl-table-editable" },
+        resizable: true,
+      },
+    }),
+    CustomTableCell.configure({
+      HTMLAttributes: { class: "fl-cell-editable" },
+    }),
+    CustomTableHeader.configure({
+      HTMLAttributes: { class: "fl-cell-editable" },
+    }),
     ...customExtensions,
   ];
 
@@ -473,15 +500,48 @@
 
   function handleRangeInput(e: any) {
      
+    $editor.commands.setNodeLineHeight(lineHeight.toString())
     
-      $editor
-        .commands
-        .setNodeLineHeight(lineHeight.toString())
+  }
+
+  function addAudio() {
+    const previousSrc = $editor.getAttributes("audio").src;
+    const src = window.prompt("Enter the URL of the audio:", previousSrc);
+    if (!src) {
+      alert("Please enter a valid URL");
+      return;
+    }
+    
+    $editor.chain().focus().setAudio({ src, controls: true }).run()
     
   }
+
+  function addImage() {
+    const previousSrc = $editor.getAttributes("image").src;  
+    const src = window.prompt("Enter the URL of the image:", previousSrc);
+
+    if (!src) {
+      alert("Please enter a valid URL");
+      return;
+    }
+    
+    $editor.chain().focus().setImage({ src }).run()
+    
+  }
+
+  function addMediaGrid() {
+
+    $editor.chain().focus().insertGrid({ cols: 2 }).run()
+    
+  }
+
+  function addTable(){
+    $editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+  }
 </script>
 
 <div class="fl-rich-text {className}" class:editable>
+
   {#if editor}
     <header class="fl-rich-text-toolbar">
       <!-- Undo/Redo -->
@@ -507,6 +567,7 @@
             ></path></svg
           >
         </button>
+
         <button
           type="button"
           onclick={() => $editor.chain().focus().redo().run()}
@@ -1154,6 +1215,50 @@
         </button>
       </div>
 
+      <!-- Audio & image -->
+      <div role="group" class="fl-rich-text-toolbar-group">
+        <!-- Image -->
+        <button
+          type="button"
+          onclick={addImage}
+          aria-label="Image"
+          class:is-active={$editor.isActive("image")}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z" /></svg>
+        </button>
+        <!-- Audio -->
+        <button
+          type="button"
+          onclick={addAudio}
+          aria-label="Audio"
+          class:is-active={$editor.isActive("audio")}
+        >
+        Audio
+        </button>
+      </div>
+
+      <!-- Media Grid & Table -->
+      <div role="group" class="fl-rich-text-toolbar-group">
+        <!-- Grid -->
+        <button
+          type="button"
+          onclick={addMediaGrid}
+          aria-label="Media grid"
+          class:is-active={$editor.isActive("MediaGridComponent")}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-layout-grid"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /><path d="M19 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /><path d="M9 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /><path d="M19 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /></svg>
+        </button>
+        <!-- Table -->
+        <button
+          type="button"
+          onclick={addTable}
+          aria-label="Table"
+          class:is-active={$editor.isActive("table")}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-table"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14" /><path d="M3 10h18" /><path d="M10 3v18" /></svg>
+        </button>
+      </div>
+
       <!-- Text align, clear formatting, clear nodes -->
       <div role="group" class="fl-rich-text-toolbar-group">
         <!-- Text align left -->

package/dist/extensions/Audio.d.ts

@@ -0,0 +1,29 @@
+import { Node } from '@tiptap/core';
+export interface AudioOptions {
+    inline: boolean;
+    allowBase64: boolean;
+    HTMLAttributes: Record<string, any>;
+}
+export interface SetAudioOptions {
+    src: string;
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    colorPlay?: string;
+    colorBar?: string;
+    maxWidth?: string;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        audio: {
+            /**
+             * Añade un elemento de audio personalizado
+             * @example
+             * editor.commands.setAudio({ src: '/audio.mp3', controls: true })
+             */
+            setAudio: (options: SetAudioOptions) => ReturnType;
+        };
+    }
+}
+export declare const inputRegex: RegExp;
+export declare const Audio: Node<AudioOptions, any>;

package/dist/extensions/Audio.js

@@ -0,0 +1,123 @@
+import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import AudioPlayer from './AudioPlayerWrapper.svelte';
+export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+export const Audio = Node.create({
+    name: 'audio',
+    addOptions() {
+        return {
+            inline: false,
+            allowBase64: false,
+            HTMLAttributes: {},
+        };
+    },
+    inline() {
+        return this.options.inline;
+    },
+    group() {
+        return this.options.inline ? 'inline' : 'block';
+    },
+    atom: true,
+    draggable: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            controls: {
+                default: true,
+                parseHTML: el => el.hasAttribute('controls'),
+                renderHTML: attrs => (attrs.controls ? { controls: true } : {}),
+            },
+            autoplay: {
+                default: false,
+                parseHTML: el => el.hasAttribute('autoplay'),
+                renderHTML: attrs => (attrs.autoplay ? { autoplay: true } : {}),
+            },
+            loop: {
+                default: false,
+                parseHTML: el => el.hasAttribute('loop'),
+                renderHTML: attrs => (attrs.loop ? { loop: true } : {}),
+            },
+            colorPlay: {
+                default: '#333',
+                parseHTML: el => el.getAttribute('data-color-play') || '#333',
+                renderHTML: attrs => ({
+                    'data-color-play': attrs.colorPlay,
+                }),
+            },
+            colorBar: {
+                default: '#888',
+                parseHTML: el => el.getAttribute('data-color-bar') || '#888',
+                renderHTML: attrs => ({
+                    'data-color-bar': attrs.colorBar,
+                }),
+            },
+            maxWidth: {
+                default: '100%',
+                parseHTML: el => el.getAttribute('data-max-width') || '100%',
+                renderHTML: attrs => ({
+                    'data-max-width': attrs.maxWidth,
+                }),
+            },
+            id: {
+                default: "fl-audio-" + Math.random().toString(36).slice(2),
+                parseHTML: el => el.getAttribute('data-id') || null,
+                renderHTML: attrs => ({
+                    'data-id': attrs.id,
+                }),
+            }
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'audio-player',
+                getAttrs: el => {
+                    if (!(el instanceof HTMLElement))
+                        return false;
+                    return {
+                        src: el.getAttribute('src'),
+                        controls: el.hasAttribute('controls'),
+                        autoplay: el.hasAttribute('autoplay'),
+                        loop: el.hasAttribute('loop'),
+                        colorPlay: el.getAttribute('data-color-play') || '#333',
+                        colorBar: el.getAttribute('data-color-bar') || '#888',
+                        maxWidth: el.getAttribute('data-max-width') || '100%',
+                    };
+                },
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'audio-player',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+        ];
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(AudioPlayer);
+    },
+    addCommands() {
+        return {
+            setAudio: options => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+    addInputRules() {
+        return [
+            nodeInputRule({
+                find: inputRegex,
+                type: this.type,
+                getAttributes: match => {
+                    const [, , , src] = match;
+                    return { src, controls: true };
+                },
+            }),
+        ];
+    },
+});