@mythrantic/svelte-rich-text 0.2.8

package/dist/components/core/main.svelte.d.ts

@@ -0,0 +1,65 @@
+import { SvelteComponent } from "svelte";
+import { type ComponentType } from 'svelte';
+import type { dataBlock, languages } from '../../utils/consts.js';
+declare const __propDef: {
+    props: {
+        initialData?: dataBlock[];
+        viewMode?: boolean;
+        headerFont?: string;
+        bodyFont?: string;
+        primaryColor?: string;
+        secondaryColor?: string;
+        textColor?: string;
+        bgColor?: string;
+        blocksGap?: number;
+        marginBlock?: number;
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        body?: string;
+        small?: string;
+        lh1?: string;
+        lh2?: string;
+        lh3?: string;
+        lh4?: string;
+        lbody?: string;
+        customImage?: ComponentType<SvelteComponent<{
+            base64: string;
+            name: string;
+            caption: string;
+        }>>;
+        customCode?: ComponentType<SvelteComponent<{
+            text: string;
+            lang: languages;
+        }>>;
+        customList?: ComponentType<SvelteComponent<{
+            items: string[];
+            type: "ordered" | "unordered";
+        }>>;
+        customHeader?: ComponentType<SvelteComponent<{
+            text: string;
+            level: 1 | 2 | 3 | 4;
+        }>>;
+        customParagraph?: ComponentType<SvelteComponent<{
+            text: string;
+        }>>;
+        customQuote?: ComponentType<SvelteComponent<{
+            text: string;
+            owner: string;
+        }>>;
+        codeBlockLanguages?: languages[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type MainProps = typeof __propDef.props;
+export type MainEvents = typeof __propDef.events;
+export type MainSlots = typeof __propDef.slots;
+export default class Main extends SvelteComponent<MainProps, MainEvents, MainSlots> {
+}
+export {};

package/dist/components/core/toolBar.svelte

@@ -0,0 +1,141 @@
+<script>import CodeIcon from "../icons/codeIcon.svelte";
+import HeaderIcon from "../icons/headerIcon.svelte";
+import ImageIcon from "../icons/imageIcon.svelte";
+import ListIcon from "../icons/listIcon.svelte";
+import QuoteIcon from "../icons/closeQuoteIcon.svelte";
+import ParagraphIcon from "../icons/paragraphIcon.svelte";
+import PlusIcon from "../icons/plusIcon.svelte";
+import CloseIcon from "../icons/closeIcon.svelte";
+import SpaceIcon from "../icons/spaceIcon.svelte";
+import shortUUID from "short-uuid";
+import { data, workingBlock } from "../../utils/stores";
+import { fade } from "svelte/transition";
+import { elasticIn } from "svelte/easing";
+function add(list, id, name) {
+  if (name === "paragraph") {
+    list.push({ name, id, data: { text: "hello friend" } });
+  } else if (name === "image") {
+    list.push({
+      name,
+      id,
+      data: { base64: "", name: "default.png", caption: "default image" }
+    });
+  } else if (name === "code") {
+    list.push({ name, id, data: { text: 'console.log("hello friend")', lang: "plaintext" } });
+  } else if (name === "quote") {
+    list.push({ name, id, data: { text: "hello friend", owner: "me" } });
+  } else if (name === "header") {
+    list.push({ name, id, data: { text: "hello friend", level: 4 } });
+  } else if (name === "list") {
+    list.push({ name, id, data: { items: ["hello friend"], type: "ordered" } });
+  } else {
+    list.push({ id, name, data: { size: 24 } });
+  }
+}
+const options = /* @__PURE__ */ new Map([
+  ["code", CodeIcon],
+  ["image", ImageIcon],
+  ["quote", QuoteIcon],
+  ["header", HeaderIcon],
+  ["paragraph", ParagraphIcon],
+  ["list", ListIcon],
+  ["space", SpaceIcon]
+]);
+let toggle = true;
+</script>
+
+<div class="toolBar">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+
+	<span on:click={() => (toggle = !toggle)} class="control">
+		{#if toggle}
+			<CloseIcon />
+		{:else}
+			<PlusIcon />
+		{/if}
+	</span>
+	{#if toggle}
+		<div class="options">
+			{#each options.entries() as option, index}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<span
+					in:fade|global={{ delay: 80 * index, duration: 300, easing: elasticIn }}
+					out:fade|global={{ delay: 80 * (6 - index), duration: 300, easing: elasticIn }}
+					data-label={'add ' + option[0]}
+					class="option"
+					on:click|stopPropagation={() => {
+						const id = shortUUID().generate();
+						data.update((prev) => {
+							add(prev, id, option[0]);
+							toggle = true;
+							return prev;
+						});
+						workingBlock.set({ id, state: 'editing' });
+					}}
+				>
+					<svelte:component this={option[1]} />
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.toolBar {
+		margin-top: 30px;
+		width: fit-content;
+		display: grid;
+		align-items: center;
+		grid-template-columns: repeat(2, auto);
+		gap: 20px;
+	}
+	.toolBar span {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		aspect-ratio: 1/1;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+
+	.control {
+		border: 1px solid var(--textColor);
+	}
+
+	.options {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 12px;
+	}
+	.option {
+		border: 1px solid var(--primaryColor);
+		position: relative;
+	}
+	.option::after {
+		content: attr(data-label);
+		position: absolute;
+		display: none;
+		top: 102%;
+		left: 1.2rem;
+		width: 120px;
+		text-transform: capitalize;
+		padding-inline: 6px;
+		padding-block: 3px;
+		font-size: var(--small);
+		font-weight: bold;
+		color: var(--textColor);
+		background-color: transparent;
+		z-index: 99;
+	}
+	.option:hover::after {
+		display: block;
+	}
+	.option > :global(svg path) {
+		fill: var(--primaryColor);
+	}
+</style>

package/dist/components/core/toolBar.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ToolBarProps = typeof __propDef.props;
+export type ToolBarEvents = typeof __propDef.events;
+export type ToolBarSlots = typeof __propDef.slots;
+export default class ToolBar extends SvelteComponent<ToolBarProps, ToolBarEvents, ToolBarSlots> {
+}
+export {};

package/dist/components/core/viewMode.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { data } from '../../utils/stores';
+	import ViewCode from '../viewBlocks/viewCode.svelte';
+	import ViewHeader from '../viewBlocks/viewHeader.svelte';
+	import ViewImage from '../viewBlocks/viewImage.svelte';
+	import ViewList from '../viewBlocks/viewList.svelte';
+	import ViewParagraph from '../viewBlocks/viewParagraph.svelte';
+	import ViewQuote from '../viewBlocks/viewQuote.svelte';
+	import ViewSpace from '../viewBlocks/viewSpace.svelte';
+</script>
+
+{#each $data as block}
+	{#if block.name == 'code'}
+		<ViewCode {...block.data} />
+	{:else if block.name == 'header'}
+		<ViewHeader {...block.data} />
+	{:else if block.name == 'list'}
+		<ViewList {...block.data} />
+	{:else if block.name == 'image'}
+		<ViewImage {...block.data} />
+	{:else if block.name == 'quote'}
+		<ViewQuote {...block.data} />
+	{:else if block.name == 'paragraph'}
+		<ViewParagraph {...block.data} />
+	{:else}
+		<ViewSpace size={block.data.size} />
+	{/if}
+{/each}

package/dist/components/core/viewMode.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  ViewModeProps */
+/** @typedef {typeof __propDef.events}  ViewModeEvents */
+/** @typedef {typeof __propDef.slots}  ViewModeSlots */
+export default class ViewMode extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ViewModeProps = typeof __propDef.props;
+export type ViewModeEvents = typeof __propDef.events;
+export type ViewModeSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export {};

package/dist/components/editBlocks/code.svelte

@@ -0,0 +1,68 @@
+<script>import { SvelteComponent, getContext } from "svelte";
+import Select from "../extra/select.svelte";
+import { updateData } from "../../utils/functions";
+import Textarea from "../extra/textarea.svelte";
+export let content;
+export let id;
+export let active = false;
+const languages = getContext("languages");
+const view = getContext("Code");
+</script>
+
+{#if active}
+	<div class="codeEdit">
+		<Select
+			label="Code language"
+			preSelected={{ label: content.lang, value: content.lang }}
+			elements={languages.map((el) => ({ value: el, label: el }))}
+			changeHandler={(detail) => {
+				updateData(id, (el) => {
+					if (el.name == 'code') el.data.lang = detail.value;
+				});
+			}}
+		/>
+		<div>
+			<span>The code</span>
+			<Textarea
+				textLevel={0}
+				textContent={content.text}
+				changeHandler={(text) => {
+					updateData(id, (el) => {
+						if (el.name == 'code') el.data.text = text;
+					});
+				}}
+			/>
+		</div>
+	</div>
+{:else}
+	<svelte:component this={view} {...content} />
+{/if}
+
+<style>
+	.codeEdit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+	.codeEdit :global(::-webkit-scrollbar) {
+		width: 0.5rem;
+	}
+	.codeEdit :global(::-webkit-scrollbar-track) {
+		background: color-mix(in srgb, var(--secondaryColor) 40%, white 40%);
+	}
+	.codeEdit :global(::-webkit-scrollbar-thumb) {
+		background: var(--secondaryColor);
+	}
+	.codeEdit div {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
+	.codeEdit div span {
+		margin-left: 10px;
+		font-weight: bold;
+		color: var(--textColor);
+		font-size: var(--small);
+	}
+</style>

package/dist/components/editBlocks/code.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { languages } from '../../utils/consts';
+declare const __propDef: {
+    props: {
+        content: {
+            text: string;
+            lang: languages;
+        };
+        id: string;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+}
+export {};

package/dist/components/editBlocks/header.svelte

@@ -0,0 +1,66 @@
+<script>import { SvelteComponent, getContext } from "svelte";
+import Select from "../extra/select.svelte";
+import Textarea from "../extra/textarea.svelte";
+import { updateData } from "../../utils/functions";
+export let content;
+export let id;
+export let active = false;
+const view = getContext("Header");
+</script>
+
+{#if active}
+	<div class="headerEdit">
+		<Select
+			preSelected={{ value: content.level, label: 'h' + content.level }}
+			label="Header level"
+			elements={[
+				{ value: 1, label: 'h1' },
+				{ value: 2, label: 'h2' },
+				{ value: 3, label: 'h3' },
+				{ value: 4, label: 'h4' }
+			]}
+			changeHandler={(detail) => {
+				updateData(id, (prev) => {
+					if (prev.name == 'header') {
+						prev.data.level = detail.value;
+						content.level = detail.value;
+					}
+				});
+			}}
+		/>
+		<div>
+			<span>Header content</span>
+			<Textarea
+				textLevel={content.level}
+				textContent={content.text}
+				changeHandler={(text) => {
+					updateData(id, (prev) => {
+						if (prev.name == 'header') prev.data.text = text;
+					});
+				}}
+			/>
+		</div>
+	</div>
+{:else}
+	<svelte:component this={view} {...content} />
+{/if}
+
+<style>
+	.headerEdit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+	.headerEdit div {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
+	.headerEdit div span {
+		margin-left: 10px;
+		font-weight: bold;
+		color: var(--textColor);
+		font-size: var(--small);
+	}
+</style>

package/dist/components/editBlocks/header.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: {
+            text: string;
+            level: 1 | 2 | 3 | 4;
+        };
+        id: string;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
+export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
+}
+export {};

package/dist/components/editBlocks/img.svelte

@@ -0,0 +1,47 @@
+<script>import { updateData } from "../../utils/functions";
+import { SvelteComponent, getContext } from "svelte";
+import Input from "../extra/input.svelte";
+import Upload from "../extra/upload.svelte";
+export let content;
+export let id;
+export let active = false;
+const view = getContext("Image");
+</script>
+
+{#if active}
+	<div class="imageEdit">
+		<Input
+			label="Image caption"
+			value={content.caption}
+			changeHandler={(text) => {
+				updateData(id, (el) => {
+					if (el.name == 'image') el.data.caption = text;
+				});
+			}}
+		/>
+		<Upload
+			fileType="image/*"
+			label="Image source"
+			currentFileName={content.name}
+			changeHandler={(base64, fileName) => {
+				updateData(id, (el) => {
+					if (el.name == 'image') {
+						el.data.name = fileName;
+						el.data.base64 = base64;
+					}
+				});
+			}}
+		/>
+	</div>
+{:else}
+	<svelte:component this={view} {...content} />
+{/if}
+
+<style>
+	.imageEdit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+</style>

package/dist/components/editBlocks/img.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: {
+            base64: string;
+            name: string;
+            caption: string;
+        };
+        id: string;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ImgProps = typeof __propDef.props;
+export type ImgEvents = typeof __propDef.events;
+export type ImgSlots = typeof __propDef.slots;
+export default class Img extends SvelteComponent<ImgProps, ImgEvents, ImgSlots> {
+}
+export {};

package/dist/components/editBlocks/list.svelte

@@ -0,0 +1,102 @@
+<script>import { SvelteComponent, getContext } from "svelte";
+import Select from "../extra/select.svelte";
+import { updateData } from "../../utils/functions";
+import Textarea from "../extra/textarea.svelte";
+import CloseIcon from "../icons/closeIcon.svelte";
+import PlusIcon from "../icons/plusIcon.svelte";
+export let content;
+export let id;
+export let active = false;
+const view = getContext("List");
+</script>
+
+{#if active}
+	<div class="listEdit">
+		<Select
+			label="List type"
+			preSelected={{ value: content.type, label: content.type }}
+			elements={[
+				{ value: 'ordered', label: 'ordered' },
+				{ value: 'unordered', label: 'unordered' }
+			]}
+			changeHandler={(detail) => {
+				updateData(id, (el) => {
+					if (el.name == 'list') el.data.type = detail.value;
+					console.log(el);
+				});
+			}}
+		/>
+		<div class="itemsEdit">
+			<span>List items</span>
+			{#each content.items as item, index}
+				<div class="itemEdit">
+					<Textarea
+						width={90}
+						textContent={item}
+						textLevel={0}
+						changeHandler={(text) => {
+							updateData(id, (el) => {
+								if (el.name == 'list') el.data.items[index] = text;
+							});
+						}}
+					/>
+					<!-- svelte-ignore missing-declaration -->
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<span
+						class="control"
+						on:click|stopPropagation={() => {
+							updateData(id, (el) => {
+								if (el.name == 'list') el.data.items.splice(index, 1);
+							});
+						}}><CloseIcon /></span
+					>
+				</div>
+			{/each}
+			<!-- svelte-ignore missing-declaration -->
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<span
+				class="control"
+				on:click|stopPropagation={() => {
+					updateData(id, (el) => {
+						if (el.name == 'list') el.data.items.push('');
+					});
+				}}><PlusIcon /></span
+			>
+		</div>
+	</div>
+{:else}
+	<svelte:component this={view} {...content} />
+{/if}
+
+<style>
+	.listEdit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+	.listEdit .itemsEdit {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+	.listEdit .itemsEdit .itemEdit {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+	.listEdit .itemsEdit .control {
+		cursor: pointer;
+	}
+	.listEdit .itemsEdit span:first-child {
+		margin-left: 10px;
+		font-weight: bold;
+		color: var(--textColor);
+		font-size: var(--small);
+	}
+	.listEdit .itemsEdit span:last-child {
+		align-self: center;
+	}
+</style>

package/dist/components/editBlocks/list.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: {
+            items: string[];
+            type: "ordered" | "unordered";
+        };
+        id: string;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/dist/components/editBlocks/paragraph.svelte

@@ -0,0 +1,22 @@
+<script>import { updateData } from "../../utils/functions";
+import { SvelteComponent, getContext } from "svelte";
+import Textarea from "../extra/textarea.svelte";
+export let content;
+export let active = false;
+export let id;
+export let view = getContext("Paragraph");
+</script>
+
+{#if active}
+	<Textarea
+		textContent={content.text}
+		textLevel={0}
+		changeHandler={(textContent) => {
+			updateData(id, (prev) => {
+				if (prev.name == 'paragraph') prev.data.text = textContent;
+			});
+		}}
+	/>
+{:else}
+	<svelte:component this={view} text={content.text} />
+{/if}