61 lines
8.3 KiB
Plaintext
61 lines
8.3 KiB
Plaintext
component WysiwygEditor {
|
|
outputs {
|
|
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
|
change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
|
focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
title: string = "Wysiwyg Editor"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
variant: string = "default"
|
|
value: string = ""
|
|
readonly: boolean = false
|
|
placeholder: string = "Write something…"
|
|
class: string = ""
|
|
}
|
|
functions {
|
|
client function format(command, sourceEvent, root, editor) {
|
|
sourceEvent.preventDefault()
|
|
root = sourceEvent.currentTarget.closest(".wrn-editor")
|
|
editor = root.querySelector("[contenteditable]")
|
|
editor.focus()
|
|
document.execCommand(command, false, null)
|
|
output.input({ value: editor.innerHTML, text: editor.textContent })
|
|
output.change({ value: editor.innerHTML, text: editor.textContent })
|
|
}
|
|
client function edit(sourceEvent) { output.input({ value: sourceEvent.currentTarget.innerHTML, text: sourceEvent.currentTarget.textContent }) }
|
|
client function finish(sourceEvent) { output.change({ value: sourceEvent.currentTarget.innerHTML, text: sourceEvent.currentTarget.textContent }); output.blur({ sourceEvent: sourceEvent }) }
|
|
}
|
|
view {
|
|
<section {...attrs} class="wrn-editor {class}" data-wrn-owner="WysiwygEditor" data-wrn-part="root" data-wrn-component="WysiwygEditor" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}
|
|
<div class="wrn-editor__surface" data-wrn-owner="WysiwygEditor" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<div role="toolbar" aria-label="Text formatting" class="wrn-editor__toolbar" data-wrn-owner="WysiwygEditor" data-wrn-part="toolbar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<button type="button" disabled="{readonly}" aria-label="Bold" @mousedown="event.preventDefault()" @click="format('bold', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><strong>B</strong></button>
|
|
<button type="button" disabled="{readonly}" aria-label="Italic" @mousedown="event.preventDefault()" @click="format('italic', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><em>I</em></button>
|
|
<button type="button" disabled="{readonly}" aria-label="Underline" @mousedown="event.preventDefault()" @click="format('underline', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><u>U</u></button>
|
|
<button type="button" disabled="{readonly}" aria-label="Bulleted list" @mousedown="event.preventDefault()" @click="format('insertUnorderedList', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--list]" aria-hidden="true"></span></button>
|
|
<button type="button" disabled="{readonly}" aria-label="Undo" @mousedown="event.preventDefault()" @click="format('undo', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--undo-2]" aria-hidden="true"></span></button>
|
|
<button type="button" disabled="{readonly}" aria-label="Strike through" @mousedown="event.preventDefault()" @click="format('strikeThrough', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">S̶</button><button type="button" disabled="{readonly}" aria-label="Numbered list" @mousedown="event.preventDefault()" @click="format('insertOrderedList', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">1.</button><button type="button" disabled="{readonly}" aria-label="Align left" @mousedown="event.preventDefault()" @click="format('justifyLeft', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">⇤</button><button type="button" disabled="{readonly}" aria-label="Align center" @mousedown="event.preventDefault()" @click="format('justifyCenter', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↔</button><button type="button" disabled="{readonly}" aria-label="Align right" @mousedown="event.preventDefault()" @click="format('justifyRight', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">⇥</button><button type="button" disabled="{readonly}" aria-label="Indent" @mousedown="event.preventDefault()" @click="format('indent', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">→</button><button type="button" disabled="{readonly}" aria-label="Outdent" @mousedown="event.preventDefault()" @click="format('outdent', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">←</button><button type="button" disabled="{readonly}" aria-label="Remove formatting" @mousedown="event.preventDefault()" @click="format('removeFormat', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Tx</button><button type="button" disabled="{readonly}" aria-label="Redo" @mousedown="event.preventDefault()" @click="format('redo', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↻</button> </div>
|
|
<div contenteditable="{readonly ? 'false' : 'true'}" role="textbox" aria-label="{title || 'Rich text editor'}" aria-multiline="true" aria-readonly="{readonly}" data-placeholder="{placeholder}" class="wrn-editor__content" @input="edit(event)" @blur="finish(event)" @focus="output.focus({ sourceEvent: event })" data-wrn-owner="WysiwygEditor" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{value}</div>
|
|
</div><slot />
|
|
</section>
|
|
}
|
|
style {
|
|
.wrn-editor { display:grid; gap:.65rem; color:var(--wrn-color-text); }
|
|
.wrn-editor > p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
|
|
.wrn-editor__surface { border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius-md); overflow:hidden; background:var(--wrn-color-surface); }
|
|
.wrn-editor__toolbar { display:flex; flex-wrap:wrap; gap:.25rem; padding:.4rem; border-bottom:1px solid var(--wrn-color-border); }
|
|
.wrn-editor button { display:grid; place-items:center; width:2rem; height:2rem; border:0; border-radius:4px; background:transparent; color:inherit; cursor:pointer; }
|
|
.wrn-editor button:hover { background:var(--wrn-color-surface-2); }
|
|
.wrn-editor button span { width:1rem; height:1rem; }
|
|
.wrn-editor__content { min-height:10rem; padding:1rem; outline-offset:-2px; font-size:.875rem; line-height:1.65; }
|
|
.wrn-editor__content:empty::before { content:attr(data-placeholder); color:var(--wrn-color-muted); pointer-events:none; }
|
|
}
|
|
}
|