2021-10-18 14:01:15 +02:00
|
|
|
<!--
|
|
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
-->
|
|
|
|
<script context="module" lang="ts">
|
2022-01-24 02:43:09 +01:00
|
|
|
import type { ContentEditableAPI } from "../../editable/ContentEditable.svelte";
|
|
|
|
import contextProperty from "../../sveltelib/context-property";
|
2022-01-08 02:46:01 +01:00
|
|
|
import type {
|
|
|
|
OnInputCallback,
|
2022-02-04 09:36:34 +01:00
|
|
|
OnInsertCallback,
|
|
|
|
Trigger,
|
2022-01-24 02:43:09 +01:00
|
|
|
} from "../../sveltelib/input-manager";
|
|
|
|
import { pageTheme } from "../../sveltelib/theme";
|
2022-02-04 09:36:34 +01:00
|
|
|
import type { EditingInputAPI } from "../EditingArea.svelte";
|
|
|
|
import type CustomStyles from "./CustomStyles.svelte";
|
2021-10-18 14:01:15 +02:00
|
|
|
|
2022-01-08 02:46:01 +01:00
|
|
|
export interface RichTextInputAPI extends EditingInputAPI, ContentEditableAPI {
|
2021-10-18 14:01:15 +02:00
|
|
|
name: "rich-text";
|
2021-11-18 10:18:39 +01:00
|
|
|
shadowRoot: Promise<ShadowRoot>;
|
|
|
|
element: Promise<HTMLElement>;
|
2021-10-18 14:01:15 +02:00
|
|
|
moveCaretToEnd(): void;
|
|
|
|
toggle(): boolean;
|
|
|
|
preventResubscription(): () => void;
|
2022-01-08 02:46:01 +01:00
|
|
|
getTriggerOnNextInsert(): Trigger<OnInsertCallback>;
|
|
|
|
getTriggerOnInput(): Trigger<OnInputCallback>;
|
|
|
|
getTriggerAfterInput(): Trigger<OnInputCallback>;
|
2021-10-18 14:01:15 +02:00
|
|
|
}
|
|
|
|
|
2022-02-03 05:52:11 +01:00
|
|
|
export function editingInputIsRichText(
|
|
|
|
editingInput: EditingInputAPI | null,
|
|
|
|
): editingInput is RichTextInputAPI {
|
|
|
|
return editingInput?.name === "rich-text";
|
|
|
|
}
|
|
|
|
|
2021-10-18 14:01:15 +02:00
|
|
|
export interface RichTextInputContextAPI {
|
|
|
|
styles: CustomStyles;
|
|
|
|
container: HTMLElement;
|
|
|
|
api: RichTextInputAPI;
|
|
|
|
}
|
|
|
|
|
|
|
|
const key = Symbol("richText");
|
2022-02-03 05:52:11 +01:00
|
|
|
const [context, setContextProperty] = contextProperty<RichTextInputContextAPI>(key);
|
2022-01-08 02:46:01 +01:00
|
|
|
|
2022-01-24 02:43:09 +01:00
|
|
|
import getInputManager from "../../sveltelib/input-manager";
|
2022-02-04 09:36:34 +01:00
|
|
|
import getDOMMirror from "../../sveltelib/mirror-dom";
|
2022-01-08 02:46:01 +01:00
|
|
|
|
|
|
|
const {
|
|
|
|
manager: globalInputManager,
|
|
|
|
getTriggerAfterInput,
|
|
|
|
getTriggerOnInput,
|
|
|
|
getTriggerOnNextInsert,
|
|
|
|
} = getInputManager();
|
|
|
|
|
2022-02-03 05:52:11 +01:00
|
|
|
export { context, getTriggerAfterInput, getTriggerOnInput, getTriggerOnNextInsert };
|
2021-10-18 14:01:15 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2022-02-04 09:36:34 +01:00
|
|
|
import { getAllContexts, onMount } from "svelte";
|
|
|
|
|
|
|
|
import { placeCaretAfterContent } from "../../domlib/place-caret";
|
|
|
|
import ContentEditable from "../../editable/ContentEditable.svelte";
|
|
|
|
import type { DecoratedElement } from "../../editable/decorated";
|
|
|
|
import { bridgeCommand } from "../../lib/bridgecommand";
|
2021-10-18 14:01:15 +02:00
|
|
|
import {
|
|
|
|
fragmentToString,
|
2022-02-04 09:36:34 +01:00
|
|
|
nodeContainsInlineContent,
|
|
|
|
nodeIsElement,
|
2022-01-24 02:43:09 +01:00
|
|
|
} from "../../lib/dom";
|
|
|
|
import { on } from "../../lib/events";
|
2022-02-04 09:36:34 +01:00
|
|
|
import { promiseWithResolver } from "../../lib/promise";
|
2022-01-24 02:43:09 +01:00
|
|
|
import { nodeStore } from "../../sveltelib/node-store";
|
2022-02-04 09:36:34 +01:00
|
|
|
import { context as decoratedElementsContext } from "../DecoratedElements.svelte";
|
|
|
|
import { context as editingAreaContext } from "../EditingArea.svelte";
|
2022-01-24 02:43:09 +01:00
|
|
|
import RichTextStyles from "./RichTextStyles.svelte";
|
|
|
|
import SetContext from "./SetContext.svelte";
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
export let hidden: boolean;
|
|
|
|
|
2022-02-03 05:52:11 +01:00
|
|
|
const { content, editingInputs } = editingAreaContext.get();
|
|
|
|
const decoratedElements = decoratedElementsContext.get();
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
const range = document.createRange();
|
|
|
|
|
|
|
|
function normalizeFragment(fragment: DocumentFragment): void {
|
|
|
|
fragment.normalize();
|
|
|
|
|
|
|
|
for (const decorated of decoratedElements) {
|
|
|
|
for (const element of fragment.querySelectorAll(
|
2021-10-19 01:06:00 +02:00
|
|
|
decorated.tagName,
|
2021-10-18 14:01:15 +02:00
|
|
|
) as NodeListOf<DecoratedElement>) {
|
|
|
|
element.undecorate();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const nodes = nodeStore<DocumentFragment>(undefined, normalizeFragment);
|
|
|
|
|
|
|
|
function adjustInputHTML(html: string): string {
|
|
|
|
for (const component of decoratedElements) {
|
|
|
|
html = component.toUndecorated(html);
|
|
|
|
}
|
|
|
|
|
|
|
|
return html;
|
|
|
|
}
|
|
|
|
|
|
|
|
function adjustInputFragment(fragment: DocumentFragment): void {
|
|
|
|
if (nodeContainsInlineContent(fragment)) {
|
|
|
|
fragment.appendChild(document.createElement("br"));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function writeFromEditingArea(html: string): void {
|
|
|
|
/* we need createContextualFragment so that customElements are initialized */
|
|
|
|
const fragment = range.createContextualFragment(adjustInputHTML(html));
|
|
|
|
adjustInputFragment(fragment);
|
|
|
|
nodes.setUnprocessed(fragment);
|
|
|
|
}
|
|
|
|
|
|
|
|
function adjustOutputFragment(fragment: DocumentFragment): void {
|
|
|
|
if (
|
|
|
|
fragment.hasChildNodes() &&
|
|
|
|
nodeIsElement(fragment.lastChild!) &&
|
|
|
|
nodeContainsInlineContent(fragment) &&
|
|
|
|
fragment.lastChild!.tagName === "BR"
|
|
|
|
) {
|
|
|
|
fragment.lastChild!.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function adjustOutputHTML(html: string): string {
|
|
|
|
for (const component of decoratedElements) {
|
|
|
|
html = component.toStored(html);
|
|
|
|
}
|
|
|
|
|
|
|
|
return html;
|
|
|
|
}
|
|
|
|
|
|
|
|
function writeToEditingArea(fragment: DocumentFragment): void {
|
|
|
|
const clone = document.importNode(fragment, true);
|
|
|
|
adjustOutputFragment(clone);
|
|
|
|
|
|
|
|
const output = adjustOutputHTML(fragmentToString(clone));
|
|
|
|
content.set(output);
|
|
|
|
}
|
|
|
|
|
2021-11-18 10:18:39 +01:00
|
|
|
const [shadowPromise, shadowResolve] = promiseWithResolver<ShadowRoot>();
|
|
|
|
|
2021-10-18 14:01:15 +02:00
|
|
|
function attachShadow(element: Element): void {
|
2021-11-18 10:18:39 +01:00
|
|
|
shadowResolve(element.attachShadow({ mode: "open" }));
|
2021-10-18 14:01:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const [richTextPromise, richTextResolve] = promiseWithResolver<HTMLElement>();
|
|
|
|
|
|
|
|
function resolve(richTextInput: HTMLElement): { destroy: () => void } {
|
|
|
|
function onPaste(event: Event): void {
|
|
|
|
event.preventDefault();
|
|
|
|
bridgeCommand("paste");
|
|
|
|
}
|
|
|
|
|
|
|
|
function onCutOrCopy(): void {
|
|
|
|
bridgeCommand("cutOrCopy");
|
|
|
|
}
|
|
|
|
|
2021-11-23 01:27:32 +01:00
|
|
|
const removePaste = on(richTextInput, "paste", onPaste);
|
|
|
|
const removeCopy = on(richTextInput, "copy", onCutOrCopy);
|
|
|
|
const removeCut = on(richTextInput, "cut", onCutOrCopy);
|
2021-10-18 14:01:15 +02:00
|
|
|
richTextResolve(richTextInput);
|
|
|
|
|
|
|
|
return {
|
|
|
|
destroy() {
|
2021-11-23 01:27:32 +01:00
|
|
|
removePaste();
|
|
|
|
removeCopy();
|
|
|
|
removeCut();
|
2021-10-18 14:01:15 +02:00
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const { mirror, preventResubscription } = getDOMMirror();
|
2022-01-08 02:46:01 +01:00
|
|
|
const localInputManager = getInputManager();
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
function moveCaretToEnd() {
|
2022-01-08 02:46:01 +01:00
|
|
|
richTextPromise.then(placeCaretAfterContent);
|
2021-10-18 14:01:15 +02:00
|
|
|
}
|
|
|
|
|
2022-01-08 02:46:01 +01:00
|
|
|
export const api = {
|
2021-10-18 14:01:15 +02:00
|
|
|
name: "rich-text",
|
2021-11-18 10:18:39 +01:00
|
|
|
shadowRoot: shadowPromise,
|
|
|
|
element: richTextPromise,
|
2021-10-18 14:01:15 +02:00
|
|
|
focus() {
|
2022-01-08 02:46:01 +01:00
|
|
|
richTextPromise.then((richText) => {
|
|
|
|
richText.focus();
|
|
|
|
});
|
2021-10-18 14:01:15 +02:00
|
|
|
},
|
|
|
|
refocus() {
|
|
|
|
richTextPromise.then((richText) => {
|
|
|
|
richText.blur();
|
|
|
|
richText.focus();
|
2022-02-05 06:58:31 +01:00
|
|
|
moveCaretToEnd();
|
2021-10-18 14:01:15 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
focusable: !hidden,
|
|
|
|
toggle(): boolean {
|
|
|
|
hidden = !hidden;
|
|
|
|
return hidden;
|
|
|
|
},
|
2021-12-13 05:00:35 +01:00
|
|
|
moveCaretToEnd,
|
2021-10-18 14:01:15 +02:00
|
|
|
preventResubscription,
|
2022-01-08 02:46:01 +01:00
|
|
|
getTriggerOnNextInsert: localInputManager.getTriggerOnNextInsert,
|
|
|
|
getTriggerOnInput: localInputManager.getTriggerOnInput,
|
|
|
|
getTriggerAfterInput: localInputManager.getTriggerAfterInput,
|
|
|
|
} as RichTextInputAPI;
|
|
|
|
|
|
|
|
const allContexts = getAllContexts();
|
|
|
|
|
|
|
|
function attachContentEditable(element: Element, { stylesDidLoad }): void {
|
|
|
|
stylesDidLoad.then(
|
|
|
|
() =>
|
|
|
|
new ContentEditable({
|
|
|
|
target: element.shadowRoot!,
|
|
|
|
props: {
|
|
|
|
nodes,
|
|
|
|
resolve,
|
|
|
|
mirrors: [mirror],
|
|
|
|
managers: [globalInputManager, localInputManager.manager],
|
|
|
|
api,
|
|
|
|
},
|
|
|
|
context: allContexts,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
function pushUpdate(): void {
|
|
|
|
api.focusable = !hidden;
|
|
|
|
$editingInputs = $editingInputs;
|
|
|
|
}
|
|
|
|
|
|
|
|
$: {
|
|
|
|
hidden;
|
|
|
|
pushUpdate();
|
|
|
|
}
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
$editingInputs.push(api);
|
|
|
|
$editingInputs = $editingInputs;
|
|
|
|
|
|
|
|
const unsubscribeFromEditingArea = content.subscribe(writeFromEditingArea);
|
|
|
|
const unsubscribeToEditingArea = nodes.subscribe(writeToEditingArea);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
unsubscribeFromEditingArea();
|
|
|
|
unsubscribeToEditingArea();
|
|
|
|
};
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
2022-01-08 02:46:01 +01:00
|
|
|
<div class="rich-text-input">
|
|
|
|
<RichTextStyles
|
|
|
|
color={$pageTheme.isDark ? "white" : "black"}
|
|
|
|
let:attachToShadow={attachStyles}
|
|
|
|
let:promise={stylesPromise}
|
|
|
|
let:stylesDidLoad
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
class="rich-text-editable"
|
|
|
|
class:hidden
|
|
|
|
class:night-mode={$pageTheme.isDark}
|
|
|
|
use:attachShadow
|
|
|
|
use:attachStyles
|
|
|
|
use:attachContentEditable={{ stylesDidLoad }}
|
|
|
|
on:focusin
|
|
|
|
on:focusout
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div class="rich-text-widgets">
|
|
|
|
{#await Promise.all( [richTextPromise, stylesPromise], ) then [container, styles]}
|
2022-02-03 05:52:11 +01:00
|
|
|
<SetContext
|
|
|
|
setter={setContextProperty}
|
|
|
|
value={{ container, styles, api }}
|
|
|
|
>
|
2022-01-08 02:46:01 +01:00
|
|
|
<slot />
|
|
|
|
</SetContext>
|
|
|
|
{/await}
|
|
|
|
</div>
|
|
|
|
</RichTextStyles>
|
|
|
|
</div>
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.hidden {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
</style>
|