@widgetic/design-system 0.3.68

package/dist/components/search-input/SearchInput.svelte

@@ -0,0 +1,115 @@
+<!--
+ * SearchInput Component
+ * A reusable search input component for all Widgetic applications
+ * 
+ * Features:
+ * - Consistent UI across all applications
+ * - Clear button for search term
+ * - Handles input, keydown, and paste events
+ * - Smooth transitions and hover states
+ * - Uses Widgetic design system styling
+ -->
+<script lang="ts">
+  import { X, IconSearch } from '@widgetic/design-system/icons';
+
+  /**
+   * Placeholder text for the search input
+   */
+  export let placeholder = "Search...";
+  
+  /**
+   * Current search value
+   */
+  export let value = "";
+  
+  /**
+   * Input event handler
+   * @param event The input event
+   */
+  export let onInput: (event: Event) => Promise<void> | void = () => {};
+  
+  /**
+   * Keydown event handler
+   * @param event The keyboard event
+   */
+  export let onKeydown: (event: KeyboardEvent) => void = () => {};
+  
+  /**
+   * Clear button event handler
+   */
+  export let onClear: () => void = () => {
+    value = "";
+  };
+  
+  /**
+   * Paste event handler
+   * @param event The clipboard event
+   */
+  export let onPaste: (event: ClipboardEvent) => void = () => {};
+  
+  /**
+   * CSS class to apply to the container
+   */
+  export let containerClass = "";
+  
+  /**
+   * CSS class to apply to the input element
+   */
+  export let inputClass = "";
+</script>
+
+<div class="w-full {containerClass}">
+  <div class="group relative w-full">
+    <div class="relative overflow-hidden rounded-small border border-[hsl(var(--grey2))] bg-[hsl(var(--grey1))] transition-colors duration-200 hover:border-[hsl(var(--grey2))]">
+      <div class="relative w-full flex items-center">
+        <div class="absolute left-2 flex items-center pointer-events-none">
+          <IconSearch class="h-5 w-5 text-[hsl(var(--grey5))] transition-colors duration-300 {value ? 'text-[hsl(var(--grey7))]' : 'group-hover:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))]'}" />
+        </div>
+        <input 
+          type="text"
+          {placeholder} 
+          bind:value
+          oninput={onInput}
+          onkeydown={(e) => {
+            // Prevent backspace events when input is already empty
+            if (e.key === 'Backspace' && !value) {
+              e.preventDefault();
+              return;
+            }
+            onKeydown(e);
+          }}
+          onpaste={onPaste}
+          class="w-full h-[38px] border-0 bg-transparent focus:outline-none focus:ring-0 focus-visible:ring-0 pl-9 pr-8 subtext 
+                transition-all duration-300 
+                {value ? 'text-[hsl(var(--grey7))]' : 'text-[hsl(var(--grey3))] placeholder:text-[hsl(var(--grey3))] placeholder:transition-colors placeholder:duration-300 group-hover:text-[hsl(var(--grey7))] group-hover:placeholder:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))] group-focus-within:placeholder:text-[hsl(var(--grey7)))'} 
+                {inputClass}"
+        />
+        {#if value}
+          <button
+            type="button"
+            class="absolute right-2 h-6 w-6 inline-flex items-center justify-center rounded-full hover:bg-[hsl(var(--grey2))] transition-all duration-300 widgetic-colors"
+            onclick={onClear}
+          >
+            <X class="h-4 w-4 text-[hsl(var(--grey7))] transition-colors duration-300 hover:text-[hsl(var(--grey7))] widgetic-colors" />
+          </button>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Ensure smooth text color transitions */
+  input {
+    transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease !important;
+  }
+  
+  input::-moz-placeholder {
+    -moz-transition: color 300ms ease !important;
+    transition: color 300ms ease !important;
+  }
+  
+  input::placeholder {
+    transition: color 300ms ease !important;
+  }
+</style> 

package/dist/components/search-input/SearchInput.svelte.d.ts

@@ -0,0 +1,46 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SearchInput: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Placeholder text for the search input
+       */ placeholder?: string;
+    /**
+       * Current search value
+       */ value?: string;
+    /**
+       * Input event handler
+       * @param event The input event
+       */ onInput?: (event: Event) => Promise<void> | void;
+    /**
+       * Keydown event handler
+       * @param event The keyboard event
+       */ onKeydown?: (event: KeyboardEvent) => void;
+    /**
+       * Clear button event handler
+       */ onClear?: () => void;
+    /**
+       * Paste event handler
+       * @param event The clipboard event
+       */ onPaste?: (event: ClipboardEvent) => void;
+    /**
+       * CSS class to apply to the container
+       */ containerClass?: string;
+    /**
+       * CSS class to apply to the input element
+       */ inputClass?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SearchInput = InstanceType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/search-input/index.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from 'svelte';
+
+export interface SearchInputProps {
+  placeholder?: string;
+  value?: string;
+  onInput?: (event: Event) => Promise<void> | void;
+  onKeydown?: (event: KeyboardEvent) => void;
+  onClear?: () => void;
+  onPaste?: (event: ClipboardEvent) => void;
+  containerClass?: string;
+  inputClass?: string;
+}
+
+export default class SearchInput extends SvelteComponent<SearchInputProps> {} 

package/dist/components/search-input/index.js

@@ -0,0 +1,4 @@
+import SearchInput from './SearchInput.svelte';
+
+export { SearchInput };
+export default SearchInput; 

package/dist/components/shad-editor/colorpicker.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { mode } from 'mode-watcher';
+	let { hex = $bindable() }: { hex: string } = $props();
+	import ColorPicker from 'svelte-awesome-color-picker';
+</script>
+
+<div class:dark={$mode === 'dark'}>
+	<ColorPicker
+		bind:hex
+		sliderDirection="vertical"
+		label="Pick a color"
+		isTextInput={false}
+		isAlpha
+		--picker-indicator-size="1rem"
+		--input-size="1rem"
+	/>
+</div>

package/dist/components/shad-editor/colorpicker.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    hex: string;
+};
+declare const Colorpicker: import("svelte").Component<$$ComponentProps, {}, "hex">;
+type Colorpicker = ReturnType<typeof Colorpicker>;
+export default Colorpicker;

package/dist/components/shad-editor/custom/Extentions/ColorHighlighter.d.ts

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

package/dist/components/shad-editor/custom/Extentions/ColorHighlighter.js

@@ -0,0 +1,25 @@
+import { Extension } from '@tiptap/core';
+import { Plugin } from '@tiptap/pm/state';
+import findColors from '../utils.js';
+export const ColorHighlighter = Extension.create({
+    name: 'colorHighlighter',
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                state: {
+                    init(_, { doc }) {
+                        return findColors(doc);
+                    },
+                    apply(transaction, oldState) {
+                        return transaction.docChanged ? findColors(transaction.doc) : oldState;
+                    }
+                },
+                props: {
+                    decorations(state) {
+                        return this.getState(state);
+                    }
+                }
+            })
+        ];
+    }
+});

package/dist/components/shad-editor/custom/Extentions/ImageExtention.d.ts

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

package/dist/components/shad-editor/custom/Extentions/ImageExtention.js

@@ -0,0 +1,30 @@
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import ImageExtendedComponent from '../image-extended-component.svelte';
+import Image from '@tiptap/extension-image';
+export const ImageExtension = Image.extend({
+    addAttributes() {
+        return {
+            src: {
+                default: null
+            },
+            alt: {
+                default: null
+            },
+            title: {
+                default: null
+            },
+            width: {
+                default: '100%'
+            },
+            height: {
+                default: null
+            },
+            align: {
+                default: 'left'
+            }
+        };
+    },
+    addNodeView: () => {
+        return SvelteNodeViewRenderer(ImageExtendedComponent);
+    }
+});

package/dist/components/shad-editor/custom/Extentions/SearchAndReplace.d.ts

@@ -0,0 +1,57 @@
+import { Extension, type Range } from '@tiptap/core';
+import { PluginKey } from '@tiptap/pm/state';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        search: {
+            /**
+             * @description Set search term in extension.
+             */
+            setSearchTerm: (searchTerm: string) => ReturnType;
+            /**
+             * @description Set replace term in extension.
+             */
+            setReplaceTerm: (replaceTerm: string) => ReturnType;
+            /**
+             * @description Set case sensitivity in extension.
+             */
+            setCaseSensitive: (caseSensitive: boolean) => ReturnType;
+            /**
+             * @description Reset current search result to first instance.
+             */
+            resetIndex: () => ReturnType;
+            /**
+             * @description Find next instance of search result.
+             */
+            nextSearchResult: () => ReturnType;
+            /**
+             * @description Find previous instance of search result.
+             */
+            previousSearchResult: () => ReturnType;
+            /**
+             * @description Replace first instance of search result with given replace term.
+             */
+            replace: () => ReturnType;
+            /**
+             * @description Replace all instances of search result with given replace term.
+             */
+            replaceAll: () => ReturnType;
+        };
+    }
+}
+export declare const searchAndReplacePluginKey: PluginKey<any>;
+export interface SearchAndReplaceOptions {
+    searchResultClass: string;
+    disableRegex: boolean;
+}
+export interface SearchAndReplaceStorage {
+    searchTerm: string;
+    replaceTerm: string;
+    results: Range[];
+    lastSearchTerm: string;
+    caseSensitive: boolean;
+    lastCaseSensitive: boolean;
+    resultIndex: number;
+    lastResultIndex: number;
+}
+export declare const SearchAndReplace: Extension<SearchAndReplaceOptions, SearchAndReplaceStorage>;
+export default SearchAndReplace;

package/dist/components/shad-editor/custom/Extentions/SearchAndReplace.js

@@ -0,0 +1,232 @@
+// MIT License
+// Copyright (c) 2023 - 2024 Jeet Mandaliya (Github Username: sereneinserenade)
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+import { Extension } from '@tiptap/core';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Node as PMNode } from '@tiptap/pm/model';
+const getRegex = (s, disableRegex, caseSensitive) => {
+    return RegExp(disableRegex ? s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') : s, caseSensitive ? 'gu' : 'gui');
+};
+function processSearches(doc, searchTerm, searchResultClass, resultIndex) {
+    const decorations = [];
+    const results = [];
+    let textNodesWithPosition = [];
+    let index = 0;
+    if (!searchTerm) {
+        return {
+            decorationsToReturn: DecorationSet.empty,
+            results: []
+        };
+    }
+    doc?.descendants((node, pos) => {
+        if (node.isText) {
+            if (textNodesWithPosition[index]) {
+                textNodesWithPosition[index] = {
+                    text: textNodesWithPosition[index].text + node.text,
+                    pos: textNodesWithPosition[index].pos
+                };
+            }
+            else {
+                textNodesWithPosition[index] = {
+                    text: `${node.text}`,
+                    pos
+                };
+            }
+        }
+        else {
+            index += 1;
+        }
+    });
+    textNodesWithPosition = textNodesWithPosition.filter(Boolean);
+    for (const element of textNodesWithPosition) {
+        const { text, pos } = element;
+        const matches = Array.from(text.matchAll(searchTerm)).filter(([matchText]) => matchText.trim());
+        for (const m of matches) {
+            if (m[0] === '')
+                break;
+            if (m.index !== undefined) {
+                results.push({
+                    from: pos + m.index,
+                    to: pos + m.index + m[0].length
+                });
+            }
+        }
+    }
+    for (let i = 0; i < results.length; i += 1) {
+        const r = results[i];
+        const className = i === resultIndex ? `${searchResultClass} ${searchResultClass}-current` : searchResultClass;
+        const decoration = Decoration.inline(r.from, r.to, {
+            class: className
+        });
+        decorations.push(decoration);
+    }
+    return {
+        decorationsToReturn: DecorationSet.create(doc, decorations),
+        results
+    };
+}
+const replace = (replaceTerm, results, { state, dispatch }) => {
+    const firstResult = results[0];
+    if (!firstResult)
+        return;
+    const { from, to } = results[0];
+    if (dispatch)
+        dispatch(state.tr.insertText(replaceTerm, from, to));
+};
+const rebaseNextResult = (replaceTerm, index, lastOffset, results) => {
+    const nextIndex = index + 1;
+    if (!results[nextIndex])
+        return null;
+    const { from: currentFrom, to: currentTo } = results[index];
+    const offset = currentTo - currentFrom - replaceTerm.length + lastOffset;
+    const { from, to } = results[nextIndex];
+    results[nextIndex] = {
+        to: to - offset,
+        from: from - offset
+    };
+    return [offset, results];
+};
+const replaceAll = (replaceTerm, results, { tr, dispatch }) => {
+    let offset = 0;
+    let resultsCopy = results.slice();
+    if (!resultsCopy.length)
+        return;
+    for (let i = 0; i < resultsCopy.length; i += 1) {
+        const { from, to } = resultsCopy[i];
+        tr.insertText(replaceTerm, from, to);
+        const rebaseNextResultResponse = rebaseNextResult(replaceTerm, i, offset, resultsCopy);
+        if (!rebaseNextResultResponse)
+            continue;
+        offset = rebaseNextResultResponse[0];
+        resultsCopy = rebaseNextResultResponse[1];
+    }
+    dispatch(tr);
+};
+export const searchAndReplacePluginKey = new PluginKey('searchAndReplacePlugin');
+export const SearchAndReplace = Extension.create({
+    name: 'searchAndReplace',
+    addOptions() {
+        return {
+            searchResultClass: 'search-result',
+            disableRegex: true
+        };
+    },
+    addStorage() {
+        return {
+            searchTerm: '',
+            replaceTerm: '',
+            results: [],
+            lastSearchTerm: '',
+            caseSensitive: false,
+            lastCaseSensitive: false,
+            resultIndex: 0,
+            lastResultIndex: 0
+        };
+    },
+    addCommands() {
+        return {
+            setSearchTerm: (searchTerm) => ({ editor }) => {
+                editor.storage.searchAndReplace.searchTerm = searchTerm;
+                return false;
+            },
+            setReplaceTerm: (replaceTerm) => ({ editor }) => {
+                editor.storage.searchAndReplace.replaceTerm = replaceTerm;
+                return false;
+            },
+            setCaseSensitive: (caseSensitive) => ({ editor }) => {
+                editor.storage.searchAndReplace.caseSensitive = caseSensitive;
+                return false;
+            },
+            resetIndex: () => ({ editor }) => {
+                editor.storage.searchAndReplace.resultIndex = 0;
+                return false;
+            },
+            nextSearchResult: () => ({ editor }) => {
+                const { results, resultIndex } = editor.storage.searchAndReplace;
+                const nextIndex = resultIndex + 1;
+                if (results[nextIndex]) {
+                    editor.storage.searchAndReplace.resultIndex = nextIndex;
+                }
+                else {
+                    editor.storage.searchAndReplace.resultIndex = 0;
+                }
+                return false;
+            },
+            previousSearchResult: () => ({ editor }) => {
+                const { results, resultIndex } = editor.storage.searchAndReplace;
+                const prevIndex = resultIndex - 1;
+                if (results[prevIndex]) {
+                    editor.storage.searchAndReplace.resultIndex = prevIndex;
+                }
+                else {
+                    editor.storage.searchAndReplace.resultIndex = results.length - 1;
+                }
+                return false;
+            },
+            replace: () => ({ editor, state, dispatch }) => {
+                const { replaceTerm, results } = editor.storage.searchAndReplace;
+                replace(replaceTerm, results, { state, dispatch });
+                return false;
+            },
+            replaceAll: () => ({ editor, tr, dispatch }) => {
+                const { replaceTerm, results } = editor.storage.searchAndReplace;
+                replaceAll(replaceTerm, results, { tr, dispatch });
+                return false;
+            }
+        };
+    },
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+        const { searchResultClass, disableRegex } = this.options;
+        const setLastSearchTerm = (t) => (editor.storage.searchAndReplace.lastSearchTerm = t);
+        const setLastCaseSensitive = (t) => (editor.storage.searchAndReplace.lastCaseSensitive = t);
+        const setLastResultIndex = (t) => (editor.storage.searchAndReplace.lastResultIndex = t);
+        return [
+            new Plugin({
+                key: searchAndReplacePluginKey,
+                state: {
+                    init: () => DecorationSet.empty,
+                    apply({ doc, docChanged }, oldState) {
+                        const { searchTerm, lastSearchTerm, caseSensitive, lastCaseSensitive, resultIndex, lastResultIndex } = editor.storage.searchAndReplace;
+                        if (!docChanged &&
+                            lastSearchTerm === searchTerm &&
+                            lastCaseSensitive === caseSensitive &&
+                            lastResultIndex === resultIndex)
+                            return oldState;
+                        setLastSearchTerm(searchTerm);
+                        setLastCaseSensitive(caseSensitive);
+                        setLastResultIndex(resultIndex);
+                        if (!searchTerm) {
+                            editor.storage.searchAndReplace.results = [];
+                            return DecorationSet.empty;
+                        }
+                        const { decorationsToReturn, results } = processSearches(doc, getRegex(searchTerm, disableRegex, caseSensitive), searchResultClass, resultIndex);
+                        editor.storage.searchAndReplace.results = results;
+                        return decorationsToReturn;
+                    }
+                },
+                props: {
+                    decorations(state) {
+                        return this.getState(state);
+                    }
+                }
+            })
+        ];
+    }
+});
+export default SearchAndReplace;

package/dist/components/shad-editor/custom/Extentions/SmilieReplacer.d.ts

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