@mythrantic/svelte-rich-text 0.2.8

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import { type ComponentType } from 'svelte';
+declare const __propDef: {
+    props: {
+        content: {
+            text: string;
+        };
+        active?: boolean;
+        id: string;
+        view?: ComponentType<SvelteComponent<{
+            text: string;
+        }>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type ParagraphProps = typeof __propDef.props;
+export type ParagraphEvents = typeof __propDef.events;
+export type ParagraphSlots = typeof __propDef.slots;
+export default class Paragraph extends SvelteComponent<ParagraphProps, ParagraphEvents, ParagraphSlots> {
+}
+export {};

package/dist/components/editBlocks/quote.svelte

@@ -0,0 +1,57 @@
+<script>import { SvelteComponent, getContext } from "svelte";
+import Input from "../extra/input.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("Quote");
+</script>
+
+{#if active}
+	<div class="quoteEdit">
+		<Input
+			value={content.owner}
+			label="The Quote owner"
+			changeHandler={(textContent) => {
+				updateData(id, (prev) => {
+					if (prev.name == 'quote') prev.data.owner = textContent;
+				});
+			}}
+		/>
+		<div>
+			<span>The quote</span>
+			<Textarea
+				textContent={content.text}
+				textLevel={0}
+				changeHandler={(textContent) => {
+					updateData(id, (prev) => {
+						if (prev.name == 'quote') prev.data.text = textContent;
+					});
+				}}
+			/>
+		</div>
+	</div>
+{:else}
+	<svelte:component this={view} {...content} />
+{/if}
+
+<style>
+	.quoteEdit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+	.quoteEdit div {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		color: var(-textColor);
+	}
+	.quoteEdit div span {
+		margin-left: 10px;
+		font-weight: bold;
+		font-size: var(--small);
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: {
+            text: string;
+            owner: string;
+        };
+        id: string;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type QuoteProps = typeof __propDef.props;
+export type QuoteEvents = typeof __propDef.events;
+export type QuoteSlots = typeof __propDef.slots;
+export default class Quote extends SvelteComponent<QuoteProps, QuoteEvents, QuoteSlots> {
+}
+export {};

package/dist/components/editBlocks/space.svelte

@@ -0,0 +1,24 @@
+<script>import { updateData } from "../../utils/functions";
+import Input from "../extra/input.svelte";
+import ViewSpace from "../viewBlocks/viewSpace.svelte";
+export let content;
+export let id;
+export let active = false;
+</script>
+
+{#if active}
+	<div class="spaceEdit">
+		<Input
+			label="Space Block size"
+			type="number"
+			value="16"
+			changeHandler={(val) => {
+				updateData(id, (el) => {
+					if (el.name == 'space') el.data.size = parseInt(val);
+				});
+			}}
+		/>
+	</div>
+{:else}
+	<ViewSpace size={content.size} />
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: {
+            size: number;
+        };
+        id: string;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type SpaceProps = typeof __propDef.props;
+export type SpaceEvents = typeof __propDef.events;
+export type SpaceSlots = typeof __propDef.slots;
+export default class Space extends SvelteComponent<SpaceProps, SpaceEvents, SpaceSlots> {
+}
+export {};

package/dist/components/extra/dropDown.svelte

@@ -0,0 +1,117 @@
+<script>import MenuIcon from "../icons/menuIcon.svelte";
+import CloseIcon from "../icons/closeIcon.svelte";
+export let options = [];
+let dialog = null;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span
+	class="openMenu"
+	on:click|stopPropagation={() => {
+		dialog.showModal();
+	}}
+>
+	<MenuIcon />
+</span>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialog}
+	on:click={(e) => {
+		e.stopPropagation();
+	}}
+>
+	<div class="dropDown">
+		<div class="label">
+			<MenuIcon />
+			<span>Menu</span>
+		</div>
+		{#each options as option}
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class="option"
+				on:click={() => {
+					option.cb();
+					dialog.close();
+				}}
+			>
+				<svelte:component this={option.icon} />
+				<span>{option.label}</span>
+			</div>
+		{/each}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class="option"
+			on:click|stopPropagation={() => {
+				dialog.close();
+			}}
+		>
+			<CloseIcon />
+			<span>Close menu</span>
+		</div>
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		border: none;
+		outline: none;
+		top: 50%;
+		left: 50%;
+		translate: -50% -50%;
+		background-color: var(--bgColor);
+		border-radius: 4px;
+		border: 2px solid var(--textColor);
+	}
+
+	dialog::backdrop {
+		background: color-mix(in srgb, gray 70%, white 0%);
+	}
+	.openMenu {
+		cursor: pointer;
+	}
+
+	.openMenu :global(svg) {
+		width: 36px;
+		height: 36px;
+	}
+	.label {
+		border-bottom: 1px solid var(--textColor);
+	}
+	.dropDown {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding-inline: 8px;
+		padding-block: 4px;
+		min-width: 18rem;
+		max-width: 25rem;
+	}
+	.dropDown div {
+		width: 100%;
+		padding-left: 3px;
+		padding-block: 8px;
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		cursor: pointer;
+	}
+	.dropDown span {
+		text-transform: capitalize;
+		color: var(--textColor);
+		font-weight: 600;
+	}
+	.dropDown :global(svg) {
+		width: 20px;
+		height: 20px;
+	}
+	.dropDown .option :global(path) {
+		fill: var(--primaryColor);
+	}
+	.dropDown .option:hover {
+		background-color: color-mix(in srgb, var(--primaryColor) 38%, white 0%);
+		border-radius: 4px;
+	}
+</style>

package/dist/components/extra/dropDown.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from 'svelte';
+declare const __propDef: {
+    props: {
+        options?: {
+            icon: ComponentType<SvelteComponent>;
+            label: string;
+            cb: () => void;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type DropDownProps = typeof __propDef.props;
+export type DropDownEvents = typeof __propDef.events;
+export type DropDownSlots = typeof __propDef.slots;
+export default class DropDown extends SvelteComponent<DropDownProps, DropDownEvents, DropDownSlots> {
+}
+export {};

package/dist/components/extra/input.svelte

@@ -0,0 +1,63 @@
+<script>export let value = "";
+export let label = "";
+export let type = "text";
+export let changeHandler;
+</script>
+
+<div class="input-container">
+	<label for="custom-input">{label}</label>
+	<div>
+		<input
+			{type}
+			{value}
+			placeholder="Enter the {label.toLowerCase()}"
+			class="custom-input"
+			on:input={(e) => changeHandler(e.currentTarget.value)}
+		/>
+	</div>
+</div>
+
+<style>
+	.input-container {
+		width: 65%;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 15px;
+	}
+
+	.input-container label {
+		font-size: var(--small);
+		font-weight: 600;
+		margin-left: 10px;
+		color: var(--textColor);
+	}
+
+	.input-container div {
+		padding: 2px;
+		border-radius: 0.4rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 2px 2px 5px 5px color-mix(in srgb, var(--textColor) 28%, white 0%);
+	}
+	.input-container div:hover {
+		border: 3px solid var(--secondaryColor);
+	}
+
+	.custom-input {
+		width: 100%;
+		padding-left: 8px;
+		padding-block: 10px;
+		font-size: var(--body);
+		color: var(--textColor);
+		border: 1px solid var(--secondaryColor);
+		border-radius: 0.4rem;
+		outline: none;
+		position: relative;
+	}
+	.custom-input[type='number']::-webkit-outer-spin-button,
+	.custom-input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+	}
+</style>

package/dist/components/extra/input.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string;
+        label?: string;
+        type?: "text" | "number";
+        changeHandler: (text: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/dist/components/extra/select.svelte

@@ -0,0 +1,50 @@
+<script>import Select from "svelte-select";
+export let label;
+export let elements;
+export let changeHandler;
+export let preSelected;
+</script>
+
+<div class="select">
+	<span>{label}</span>
+	<Select
+		value={preSelected}
+		placeholder={'Select a ' + label}
+		items={elements}
+		showChevron={true}
+		hideEmptyState={true}
+		clearable={false}
+		--background={'transparent'}
+		--chevron-color={'var(--fontColor)'}
+		--item-color={'var(--fontColor)'}
+		--item-first-border-radius={'0'}
+		--input-color={'var(--fontColor)'}
+		--item-hover-bg={'color-mix(in srgb , var(--secondaryColor) 70%, white 0%)'}
+		--item-is-active-color={'var(--fontColor)'}
+		--item-is-active-bg={'var(--secondaryColor)'}
+		--list-border={'1px solid var(--secondaryColor)'}
+		--border={'2px solid var(--secondaryColor)'}
+		--border-focused={'2px solid var(--secondaryColor)'}
+		--border-hover={'2px solid var(--secondaryColor)'}
+		--clear-icon-color={'var(--fontColor)'}
+		on:change={(event) => {
+			changeHandler(event.detail);
+		}}
+	/>
+</div>
+
+<style>
+	.select {
+		width: 50%;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 15px;
+	}
+	.select span {
+		font-size: var(--small);
+		font-weight: 600;
+		margin-left: 10px;
+		color: var(--textColor);
+	}
+</style>

package/dist/components/extra/select.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        elements: {
+            label: string;
+            value: any;
+        }[];
+        changeHandler: (item: {
+            value: any;
+            label: string;
+        }) => void;
+        preSelected: {
+            label: string;
+            value: any;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/dist/components/extra/textarea.svelte

@@ -0,0 +1,40 @@
+<script>export let changeHandler;
+export let textContent = "";
+export let textLevel = 0;
+export let width = 100;
+</script>
+
+<div class="areaWrapper" style:width={`${width}%`}>
+	<span
+		style:font-size="var(--{textLevel == 0 ? 'body' : 'h' + textLevel})"
+		style:font-weight={textLevel == 0 ? '400' : 'bold'}
+		style:line-height="var(--l{textLevel == 0 ? 'body' : 'h'})"
+		style:font-family={textLevel == 0 ? 'var(--bodyFont)' : 'var(--headingFont)'}
+		class="editableArea"
+		contenteditable="plaintext-only"
+		bind:textContent
+		on:input={(e) => {
+			changeHandler(e.currentTarget.textContent);
+		}}
+	>
+		{textContent}
+	</span>
+</div>
+
+<style>
+	.areaWrapper {
+		display: flex;
+		align-items: center;
+		min-height: 2rem;
+		border-left: 6px solid var(--secondaryColor);
+		padding-left: 8px !important;
+		cursor: auto;
+		cursor: pointer;
+	}
+	.editableArea {
+		width: 100%;
+		color: var(--textColor);
+		border: none;
+		outline: none;
+	}
+</style>

package/dist/components/extra/textarea.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        changeHandler: (data: string) => void;
+        textContent?: string;
+        textLevel?: 0 | 1 | 2 | 3 | 4;
+        width?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
+}
+export {};

package/dist/components/extra/upload.svelte

@@ -0,0 +1,79 @@
+<script>import UploadIcon from "../icons/uploadIcon.svelte";
+export let label = "";
+export let changeHandler;
+export let fileType = "image/*";
+export let currentFileName = "default.png";
+</script>
+
+<div class="input-container">
+	<span>{label}</span>
+	<input
+		type="file"
+		id="custom-input"
+		class="custom-input"
+		accept={fileType}
+		on:change={(e) => {
+			const file = e.currentTarget.files[0];
+			if (file) {
+				const reader = new FileReader();
+				reader.onload = () => {
+					changeHandler(reader.result.toString(), file.name);
+					currentFileName = file.name;
+				};
+				reader.readAsDataURL(file);
+			}
+		}}
+	/>
+	<div class="inputReplace">
+		<label class="uploadBtn" for="custom-input">
+			<span>Upload a file</span>
+			<UploadIcon />
+		</label>
+		<span>{currentFileName}</span>
+	</div>
+</div>
+
+<style>
+	.input-container {
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+
+	.input-container span,
+	.input-container label {
+		color: var(--textColor);
+		font-size: var(--body);
+	}
+
+	.input-container span:first-child {
+		font-weight: 600;
+		margin-left: 10px;
+		font-size: var(--small);
+	}
+
+	.inputReplace {
+		width: fit-content;
+		display: flex;
+		align-items: center;
+		gap: 20px;
+	}
+
+	.custom-input {
+		display: none;
+	}
+	.uploadBtn {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		border: 2px solid var(--secondaryColor);
+		padding-inline: 8px;
+		padding-block: 10px;
+		border-radius: 0.5rem;
+		box-shadow: 2px 2px 5px 5px color-mix(in srgb, var(--textColor) 28%, white 0%);
+	}
+	.uploadBtn span {
+		font-weight: 600;
+	}
+</style>

package/dist/components/extra/upload.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        changeHandler: (base64: string, fileName: string) => void;
+        fileType?: "image/*" | ".pdf";
+        currentFileName?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type UploadProps = typeof __propDef.props;
+export type UploadEvents = typeof __propDef.events;
+export type UploadSlots = typeof __propDef.slots;
+export default class Upload extends SvelteComponent<UploadProps, UploadEvents, UploadSlots> {
+}
+export {};

package/dist/components/icons/closeIcon.svelte

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+	><path
+		fill="#000000"
+		d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+	/></svg
+>

package/dist/components/icons/closeIcon.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  CloseIconProps */
+/** @typedef {typeof __propDef.events}  CloseIconEvents */
+/** @typedef {typeof __propDef.slots}  CloseIconSlots */
+export default class CloseIcon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CloseIconProps = typeof __propDef.props;
+export type CloseIconEvents = typeof __propDef.events;
+export type CloseIconSlots = 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/icons/closeQuoteIcon.svelte

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+	><path fill="#000000" d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4Z" /></svg
+>
+
+<style>
+	svg path {
+		fill: var(--primaryColor);
+	}
+</style>