WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/WysiwygEditor.wrn
+10 -10
View File
@@ -32,17 +32,17 @@ component WysiwygEditor {
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}">
<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">
<div role="toolbar" aria-label="Text formatting" class="wrn-editor__toolbar">
<button type="button" disabled="{readonly}" aria-label="Bold" @mousedown="event.preventDefault()" @click="format('bold', event)"><strong>B</strong></button>
<button type="button" disabled="{readonly}" aria-label="Italic" @mousedown="event.preventDefault()" @click="format('italic', event)"><em>I</em></button>
<button type="button" disabled="{readonly}" aria-label="Underline" @mousedown="event.preventDefault()" @click="format('underline', event)"><u>U</u></button>
<button type="button" disabled="{readonly}" aria-label="Bulleted list" @mousedown="event.preventDefault()" @click="format('insertUnorderedList', event)"><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)"><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)">S̶</button><button type="button" disabled="{readonly}" aria-label="Numbered list" @mousedown="event.preventDefault()" @click="format('insertOrderedList', event)">1.</button><button type="button" disabled="{readonly}" aria-label="Align left" @mousedown="event.preventDefault()" @click="format('justifyLeft', event)">⇤</button><button type="button" disabled="{readonly}" aria-label="Align center" @mousedown="event.preventDefault()" @click="format('justifyCenter', event)">↔</button><button type="button" disabled="{readonly}" aria-label="Align right" @mousedown="event.preventDefault()" @click="format('justifyRight', event)">⇥</button><button type="button" disabled="{readonly}" aria-label="Indent" @mousedown="event.preventDefault()" @click="format('indent', event)">→</button><button type="button" disabled="{readonly}" aria-label="Outdent" @mousedown="event.preventDefault()" @click="format('outdent', event)">←</button><button type="button" disabled="{readonly}" aria-label="Remove formatting" @mousedown="event.preventDefault()" @click="format('removeFormat', event)">Tx</button><button type="button" disabled="{readonly}" aria-label="Redo" @mousedown="event.preventDefault()" @click="format('redo', event)">↻</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 })">{value}</div>
<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>
}