@mythrantic/svelte-rich-text 0.2.8

package/dist/components/viewBlocks/viewCode.svelte

@@ -0,0 +1,150 @@
+<script>import { onMount } from "svelte";
+import CopyIcon from "../icons/copyIcon.svelte";
+import DoneIcon from "../icons/doneIcon.svelte";
+export let text;
+export let lang;
+let formattedCode = "";
+let copyStatement = false;
+async function copyCode(e) {
+  e.preventDefault();
+  navigator.clipboard.writeText(text);
+  copyStatement = true;
+  await new Promise((res) => setTimeout(res, 800));
+  copyStatement = false;
+}
+onMount(() => {
+  formattedCode = addLineNumbersAndEscapeHtml(text);
+});
+function addLineNumbersAndEscapeHtml(code) {
+  return code.split("\n").map((line, index) => {
+    const escapedLine = escapeHtml(line);
+    return `<span class="line-number">${index + 1}</span>${escapedLine}`;
+  }).join("\n");
+}
+function escapeHtml(unsafe) {
+  return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+</script>
+
+
+
+<svelte:head>
+    <!-- Include Prism.js and its CSS theme for syntax highlighting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" />
+</svelte:head>
+
+<div id="outer-container">
+    <div id="code-snippet-container">
+        <div id="padding-container">
+            <div id="title-bar">
+                <span id="title">{lang}</span>
+                <button id="copy-button" on:click|stopPropagation={copyCode}>
+                    {#if !copyStatement}
+                        <CopyIcon />
+                    {:else}
+                        <DoneIcon />
+                    {/if}
+                </button>
+            </div>
+        </div>
+        <div id="code-content">
+            <pre class="language-{lang}"><code id="code-text">{@html formattedCode}</code></pre>
+        </div>
+    </div>
+</div>
+
+<style>
+    #outer-container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    #code-snippet-container {
+        width: 100%; /* Ensure full width */
+        margin: 2rem auto; /* Centering the container */
+        background-color: #1F2937;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        overflow: hidden; /* Hide overflow */
+    }
+
+    #padding-container {
+        padding: 1rem;
+        background-color: #2c3e50;
+        border-top-left-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+    }
+
+    #title-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    #title {
+        color: #E5E7EB;
+        font-size: 1.25rem;
+        font-weight: bold;
+    }
+
+    #copy-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 1rem;
+        color: white;
+        background-color: #14B8A6;
+        border-radius: 0.25rem;
+        transition: background-color 0.3s;
+    }
+
+    #copy-button:hover {
+        background-color: #0D9488;
+    }
+
+    #copy-button:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px #F87171;
+    }
+    #code-content {
+        position: relative;
+        padding: 1rem;
+        background-color: #1F2937;
+        border-bottom-left-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
+        overflow: auto; /* Enable scrolling for overflow content */
+    }
+
+    pre {
+        margin: 0;
+        padding: 0; /* Remove padding to use full width */
+        max-height: 500px;
+        overflow: auto; /* Scroll for overflow */
+    }
+
+    #code-text {
+        font-size: 0.875rem;
+        white-space: pre;
+        color: #E5E7EB;
+        tab-size: 4;
+    }
+
+    .line-number {
+        display: inline-block;
+        min-width: 2em;
+        text-align: right;
+        margin-right: 16px;
+        color: #888;
+        user-select: none;
+    }
+    
+    @media (max-width: 768px) {
+        #title {
+            font-size: 1rem;
+        }
+        #code-text {
+            font-size: 0.75rem;
+        }
+    }
+</style>

package/dist/components/viewBlocks/viewCode.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { languages } from '../../utils/consts';
+declare const __propDef: {
+    props: {
+        text: string;
+        lang: languages;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ViewCodeProps = typeof __propDef.props;
+export type ViewCodeEvents = typeof __propDef.events;
+export type ViewCodeSlots = typeof __propDef.slots;
+export default class ViewCode extends SvelteComponent<ViewCodeProps, ViewCodeEvents, ViewCodeSlots> {
+}
+export {};

package/dist/components/viewBlocks/viewHeader.svelte

@@ -0,0 +1,13 @@
+<script>export let text;
+export let level;
+</script>
+
+{#if level == 1}
+	<h1>{text}</h1>
+{:else if level == 2}
+	<h2>{text}</h2>
+{:else if level == 3}
+	<h3>{text}</h3>
+{:else}
+	<h4>{text}</h4>
+{/if}

package/dist/components/viewBlocks/viewHeader.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        level: 1 | 2 | 3 | 4;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ViewHeaderProps = typeof __propDef.props;
+export type ViewHeaderEvents = typeof __propDef.events;
+export type ViewHeaderSlots = typeof __propDef.slots;
+export default class ViewHeader extends SvelteComponent<ViewHeaderProps, ViewHeaderEvents, ViewHeaderSlots> {
+}
+export {};

package/dist/components/viewBlocks/viewImage.svelte

@@ -0,0 +1,35 @@
+<script>export let base64;
+export let caption;
+export let name;
+let fallback = base64 == "";
+</script>
+
+<div class="imageView">
+	{#if fallback}
+		<img src='/default.jpg' alt="favicon" />
+	{:else}
+		<img src={base64} alt="sorry {name} image does not exist" on:error={() => (fallback = true)} />
+	{/if}
+	<span>{caption}</span>
+</div>
+
+<style>
+	.imageView {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+	}
+	.imageView img {
+		width: 100%;
+		aspect-ratio: 2/1;
+		border-radius: 8px;
+		object-fit: cover;
+		object-position: center;
+	}
+	.imageView span {
+		color: var(--textColor);
+		font-weight: 600;
+	}
+</style>

package/dist/components/viewBlocks/viewImage.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        base64: string;
+        caption: string;
+        name: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ViewImageProps = typeof __propDef.props;
+export type ViewImageEvents = typeof __propDef.events;
+export type ViewImageSlots = typeof __propDef.slots;
+export default class ViewImage extends SvelteComponent<ViewImageProps, ViewImageEvents, ViewImageSlots> {
+}
+export {};

package/dist/components/viewBlocks/viewList.svelte

@@ -0,0 +1,69 @@
+<script>export let items;
+export let type;
+</script>
+
+{#if type == 'ordered'}
+	<ol>
+		{#each items as item, index}
+			<div class="item">
+				<span class="index">{index + '.'}</span>
+				<li>{item}</li>
+			</div>
+		{/each}
+	</ol>
+{:else}
+	<ul>
+		{#each items as item}
+			<li>{item}</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	ul,
+	ol {
+		color: var(--textColor);
+		list-style: none;
+		text-transform: capitalize;
+		inset: unset;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+
+	ul {
+		list-style: inside;
+	}
+
+	ol .item {
+		display: grid;
+		grid-template-columns: auto auto;
+		align-items: center;
+		justify-content: start;
+		gap: 12px;
+	}
+	ol .item .index {
+		width: 2.2rem;
+		height: 2.2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 2px solid var(--primaryColor);
+		border-radius: 50%;
+		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+	}
+	ol .item li,
+	ul li {
+		background-color: color-mix(in srgb, var(--primaryColor) 34%, white 10%);
+		padding: 6px;
+		border-radius: 4px;
+	}
+	ol .item:nth-child(even) li,
+	ul li:nth-child(even) {
+		background-color: color-mix(in srgb, var(--secondaryColor) 34%, white 10%);
+	}
+	ol .item:nth-child(even) .index {
+		border: 2px solid var(--secondaryColor);
+	}
+</style>

package/dist/components/viewBlocks/viewList.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        items: string[];
+        type: "ordered" | "unordered";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ViewListProps = typeof __propDef.props;
+export type ViewListEvents = typeof __propDef.events;
+export type ViewListSlots = typeof __propDef.slots;
+export default class ViewList extends SvelteComponent<ViewListProps, ViewListEvents, ViewListSlots> {
+}
+export {};

package/dist/components/viewBlocks/viewParagraph.svelte

@@ -0,0 +1,12 @@
+<script>export let text;
+</script>
+
+<div class="viewParagraph">
+	<p>{text}</p>
+</div>
+
+<style>
+	p {
+		color: var(--textColor);
+	}
+</style>

package/dist/components/viewBlocks/viewParagraph.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ViewParagraphProps = typeof __propDef.props;
+export type ViewParagraphEvents = typeof __propDef.events;
+export type ViewParagraphSlots = typeof __propDef.slots;
+export default class ViewParagraph extends SvelteComponent<ViewParagraphProps, ViewParagraphEvents, ViewParagraphSlots> {
+}
+export {};

package/dist/components/viewBlocks/viewQuote.svelte

@@ -0,0 +1,29 @@
+<script>import CloseQuoteIcon from "../icons/closeQuoteIcon.svelte";
+import OpenQuote from "../icons/openQuoteIcon.svelte";
+export let text;
+export let owner;
+</script>
+
+<div class="quote">
+	<span class="quoteContent"><OpenQuote />{text}<CloseQuoteIcon /></span>
+	<span class="quoteOwner">{owner}</span>
+</div>
+
+<style>
+	.quote {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		color: var(--textColor);
+	}
+	.quote .quoteOwner {
+		align-self: flex-end;
+		color: var(--primaryColor);
+		text-transform: capitalize;
+		font-weight: bold;
+	}
+	.quote .quoteContent {
+		padding-left: 10px;
+		font-size: var(--small);
+	}
+</style>

package/dist/components/viewBlocks/viewQuote.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        owner: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ViewQuoteProps = typeof __propDef.props;
+export type ViewQuoteEvents = typeof __propDef.events;
+export type ViewQuoteSlots = typeof __propDef.slots;
+export default class ViewQuote extends SvelteComponent<ViewQuoteProps, ViewQuoteEvents, ViewQuoteSlots> {
+}
+export {};

package/dist/components/viewBlocks/viewSpace.svelte

@@ -0,0 +1,4 @@
+<script>export let size;
+</script>
+
+<div style:height={size + 'px'} style:width={'100%'} />

package/dist/components/viewBlocks/viewSpace.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ViewSpaceProps = typeof __propDef.props;
+export type ViewSpaceEvents = typeof __propDef.events;
+export type ViewSpaceSlots = typeof __propDef.slots;
+export default class ViewSpace extends SvelteComponent<ViewSpaceProps, ViewSpaceEvents, ViewSpaceSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export function getData(): import("./utils/consts").dataBlock[];
+export function setData(newData: any): void;
+export { default as ValiantRichText } from "./components/core/main.svelte";

package/dist/index.js

@@ -0,0 +1,13 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { get } from 'svelte/store';
+import { data } from './utils/stores';
+export { default as ValiantRichText } from './components/core/main.svelte';
+
+export function getData() {
+	return get(data);
+}
+
+export function setData(newData) {
+	data.set(newData);
+}

package/dist/utils/consts.d.ts

@@ -0,0 +1,96 @@
+import type { ComponentType, SvelteComponent } from 'svelte';
+export type blocks = 'image' | 'code' | 'quote' | 'paragraph' | 'header' | 'list' | 'space';
+export type dataBlock = {
+    name: 'image';
+    id: string;
+    data: {
+        base64: string;
+        name: string;
+        caption: string;
+    };
+} | {
+    name: 'paragraph';
+    id: string;
+    data: {
+        text: string;
+    };
+} | {
+    name: 'code';
+    id: string;
+    data: {
+        text: string;
+        lang: languages;
+    };
+} | {
+    name: 'quote';
+    id: string;
+    data: {
+        text: string;
+        owner: string;
+    };
+} | {
+    name: 'header';
+    id: string;
+    data: {
+        text: string;
+        level: 1 | 2 | 3 | 4;
+    };
+} | {
+    name: 'space';
+    id: string;
+    data: {
+        size: number;
+    };
+} | {
+    name: 'list';
+    id: string;
+    data: {
+        items: string[];
+        type: 'ordered' | 'unordered';
+    };
+};
+export type viewBlocks = [
+    {
+        name: 'image';
+        component: ComponentType<SvelteComponent<{
+            base64: string;
+            name: string;
+            caption: string;
+        }>>;
+    },
+    {
+        name: 'quote';
+        component: ComponentType<SvelteComponent<{
+            text: string;
+            owner: string;
+        }>>;
+    },
+    {
+        name: 'code';
+        component: ComponentType<SvelteComponent<{
+            text: string;
+            lang: languages;
+        }>>;
+    },
+    {
+        name: 'header';
+        component: ComponentType<SvelteComponent<{
+            text: string;
+            level: 1 | 2 | 3 | 4;
+        }>>;
+    },
+    {
+        name: 'paragraph';
+        component: ComponentType<SvelteComponent<{
+            text: string;
+        }>>;
+    },
+    {
+        name: 'list';
+        component: ComponentType<SvelteComponent<{
+            items: string[];
+            type: 'ordered' | 'unordered';
+        }>>;
+    }
+];
+export type languages = 'typescript' | 'javascript' | 'java' | 'css' | 'json' | 'c' | 'cpp' | 'csharp' | 'python' | 'php' | 'sql' | 'plaintext' | 'yaml' | 'xml' | 'rust' | 'lua' | 'bash' | 'markdown' | 'swift' | 'dart' | 'dockerfile' | 'kotlin' | 'ruby' | 'perl' | 'scala' | 'groovy' | 'haskell' | 'r' | 'erlang' | 'elixir' | 'assembly' | 'powershell' | 'matlab' | 'fortran' | 'pascal' | 'cobol' | 'actionscript' | 'scheme' | 'svelte' | 'html' | 'sass' | 'less' | 'stylus' | 'vue' | 'react' | 'angular' | 'graphql' | 'nodejs' | 'shell' | 'objective-c' | 'fsharp' | 'vbnet' | 'julia' | 'clojure' | 'nim' | 'reason' | 'elm' | 'ocaml' | 'wasm' | 'toml';

package/dist/utils/consts.js

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

package/dist/utils/functions.d.ts

@@ -0,0 +1,2 @@
+import type { dataBlock } from './consts';
+export declare function updateData(id: string, cb: (el: dataBlock) => void): void;

package/dist/utils/functions.js

@@ -0,0 +1,12 @@
+import { data } from './stores';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function updateData(id, cb) {
+    data.update((prev) => {
+        prev.forEach((el) => {
+            if (el.id == id) {
+                cb(el);
+            }
+        });
+        return prev;
+    });
+}

package/dist/utils/stores.d.ts

@@ -0,0 +1,6 @@
+import type { dataBlock } from './consts.js';
+export declare const data: import("svelte/store").Writable<dataBlock[]>;
+export declare const workingBlock: import("svelte/store").Writable<{
+    state: "focused" | "editing";
+    id: string;
+}>;

package/dist/utils/stores.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+export const data = writable([]);
+export const workingBlock = writable(null);