VladPolskiy/wc-wysiwyg
1
0
Fork 0
mirror of https://github.com/webislife/wc-wysiwyg.git synced 2025-07-21 05:47:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12 from webislife/v1

Browse Source 
Up to v1
This commit is contained in:
Denis
2023-05-14 01:04:13 +03:00
committed by GitHub
parent d12b5a55c8 8ae8da7c4a
commit bff5b6befa
6 changed files with 643 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -40,6 +40,10 @@ See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list an
✅ Inserting `<video>` element
- ✅ Suppoer extensions
- Color text and background editor
- Emoji table
## Install

2
dist/wc-wysiwyg.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@webislife/wc-wysiwyg",
"version": "0.9.34",
"version": "1.0.1",
"description": "WYWSIWYG HTML5 Editor written in ts and designed by web-componennt, support all JS frameworks and browsers",
"main": "dist/wc-wysiwyg.js",
"type": "module",

2
src/core/el.ts
View File

@ -2,7 +2,7 @@
* Short for document.createElement
* @param tagName element tag name
* @param params list of object params for document.createElements
* @returns HTMLElement\CustomElement
* @returns HTML\CUSTOMElement
*/
export const el = (tagName:keyof HTMLElementTagNameMap|string, {classList, styles, props, attrs, options, append}:{
classList?: string[],

459
src/sass/wc-wysiwyg.scss
View File

@ -1,11 +1,142 @@
:root {
// orange
--color-orange-50: #FFF8E1;
--color-orange-100: #FFF8E1;
--color-orange-500: #FF9800;
--color-orange-700: #F57C00;
--color-green-50: #E8F5E9;
--color-green-100: #C8E6C9;
--color-green-300: #AED581;
--color-green-500: #4CAF50;
--color-green-900: #1B5E20;
--color-red-50: #FFEBEE;
--color-red-100: #FFCDD2;
--color-red-200: #FF8A65;
--color-red-500: #F44336;
--color-red-900: #B71C1C;
--color-amber-50: #FFF8E1;
--color-amber-100: #FFE0B2;
--color-amber-900: #FF6F00;
--color-indigo-100: #C5CAE9;
// orange
--color-deep-orange-50: #FBE9E7;
--color-deep-orange-900: #BF360C;
// lime
--color-lime-50: #F9FBE7;
// grey
--color-grey-50: #FAFAFA;
--color-grey-100: #F5F5F5;
--color-grey-200: #EEEEEE;
--color-grey-300: #E0E0E0;
--color-grey-400: #BDBDBD;
--color-grey-500: #9E9E9E;
--color-grey-600: #757575;
--color-grey-700: #757575;
--color-grey-800: #424242;
--color-grey-900: #212121;
// blue
--color-blue-50: #E3F2FD;
--color-blue-100: #BBDEFB;
--color-blue-200: #90CAF9;
--color-blue-300: #64B5F6;
--color-blue-400: #42A5F5;
--color-blue-500: #2196F3;
--color-blue-800: #1565C0;
--color-blue-900: #0D47A1;
// blue-gray
--color-blue-gray-50: #ECEFF1;
--color-blue-gray-100: #CFD8DC;
--color-blue-gray-200: #B0BEC5;
--color-blue-gray-300: #90A4AE;
--color-blue-gray-400: #78909C;
--color-blue-gray-700: #455A64;
--color-blue-gray-800: #37474F;
--color-blue-gray-900: #263238;
// blue-light
--color-blue-light-50: #E1F5FE;
--color-blue-light-100: #B3E5FC;
--wc-wysiwyg-light: #fff;
--wc-wysiwyg-dark: #37474F;
}
wc-wysiwyg.-word .wc-wysiwyg_pf > label {
background-color: var(--color-blue-500);
}
wc-wysiwyg.-word .wc-wysiwyg_pf {
background-color: var(--color-blue-400);
border-radius: 5px;
padding: 5px;
}
wc-wysiwyg.-word .wc-wysiwyg_content {
border-radius: 5px;
}
wc-wysiwyg.-word .wc-wysiwyg_bt {
background-color: var(--color-blue-300);
padding:5px;
border-radius: 3px;
}
wc-wysiwyg.-word .wc-wysiwyg_ec {
background-color: var(--wc-wysiwyg-light);
padding:5px;
border-radius: 3px;
margin: 5px 0;
border: 0;
}
.wc-wysiwyg {
background-color: #eee;
background-color: var(--wc-wysiwyg-light);
font-family: Arial, Helvetica, sans-serif;
position: relative;
border: 1px solid var(--color-blue-gray-400);
padding:5px;
border-radius: 3px;
display: block;
&_dialog {
border-radius: 10px;
border:none;
outline: none;
&::backdrop {
background: rgba(0, 0, 0, 0.8);
}
&.-modal {
min-width: 90vw;
min-height: 90vh;
max-height: 90vh;
max-height: 90vh;
}
&.-colors {
display: flex;
flex-wrap: wrap;
justify-content: center;
min-width: 0;
min-height: 0;
max-width: 300px;
&:not([open]) {
display: none;
}
& fieldset.-palette {
padding: 0;
display: flex;
flex: 1;
margin: 0;
border: 0;
outline: 0;
max-width: 20px;
& > button {
flex: 1;
margin: 2px;
}
}
}
}
&_bt {
display: block;
padding:5px;
@ -27,31 +158,23 @@
&_ce {
position: relative;
margin: 0;
padding: 7px;
border: 1px solid var(--color-blue-500);
border-radius: 3px;
background-color: var(--color-blue-50);
}
&_ce:before {
content: 'HTML5 custom-elements';
color: #fff;
background-color: var(--color-blue-500);
position: absolute;
font-size: 10px;
line-height: 0.6em;
padding: 3px;
border-radius: 3px;
transform: translate(0, -50%);
top:0;
left:0;
}
&_ce > button {
border-color: var(--color-blue-500);
background-color: var(--color-blue-100);
&:hover {
border-color: var(--color-blue-900);
background-color: var(--color-blue-200);
margin-bottom: 5px;
padding: 5px;
border-radius: 5px;
border: none;
background: rgba(0,0,0,0.2);
&:before {
content: 'HTML5 custom-elements';
color: #fff;
background-color: var(--color-blue-500);
position: absolute;
font-size: 10px;
line-height: 0.6em;
padding: 3px;
border-radius: 3px;
transform: translate(0, -50%);
top:0;
left:0;
}
}
/* preview */
@ -62,7 +185,7 @@
min-height: 200px;
}
&_content {
padding:5px 5px 2em 5px;
padding:0.5em;
border:1px solid #ccc;
background: #fff;
overflow-x: hidden;
@ -72,7 +195,7 @@
box-sizing: border-box;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
display: block;
resize: vertical;
& .-selected {
background-color: var(--color-blue-100);
@ -86,52 +209,237 @@
}
}
&_ec {
background: var(--color-blue-gray-100);
padding: 0.5em 0.25em 0.25em 0.25em;
border-radius: 3px;
border: 1px solid;
border-color: var(--color-blue-gray-100);
}
&_ec:focus-within {
border-color: var(--color-blue-500);
background: #2b393f;
padding: 5px;
border-radius: 5px;
margin-bottom: 10px;
top:0;
position: sticky;
z-index: 2;
}
&_btn {
background: var(--color-blue-gray-50);
outline: none;
padding: 3px 6px;
border-radius: 3px;
border: 1px solid var(--color-blue-gray-200);
border-bottom: 3px solid var(--color-blue-gray-200);
color: #333;
min-width: 0px;
text-align: center;
box-sizing: border-box;
display: inline-block;
text-transform: uppercase;
font-size: 0.85em;
font-weight: 400;
line-height: 1;
white-space: nowrap;
margin-right: 5px;
min-width: 30px;
line-height: 20px;
background-color: var(--wc-wysiwyg-light);
box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
border:0;
border-radius: 5px;
padding:2px 5px;
margin-right:5px;
user-select: none;
cursor: pointer;
&:hover {
background: var(--color-blue-gray-100);
border-color: var(--color-blue-gray-300);
box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9);
}
&:focus {
border-color: var(--color-blue-500);
box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9);
}
&:active {
padding-top:2px;
background: var(--color-blue-gray-100);
border-color: var(--color-blue-gray-700);
border-bottom: 1px solid;
box-shadow: 0 2px 5px rgba(1, 181, 52, 0.9);
}
&.-clear {
text-decoration: line-through;
font-weight: bold;
}
&.-emoji {
border:none;
font-size: 20px;
min-width: 32px;
min-height: 32px;
line-height: 32px;
box-sizing: border-box;
padding:0;
border-radius: 1em;
margin: 2px;
}
&.-color {
min-width: 20px;
min-height: 20px;
border-color: rgba(0,0,0,0.2);
}
&.-prevcolor {
// background-color: transparent;
// border: 1px solid #ccc;
&::before {
display: inline-block;
background-color: var(--colorer);
width: 12px;
content: '';
height: 12px;
margin-right: 5px;
border-radius: 2px;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.5);
}
}
&.-b {
font-weight: bold;
}
&.-i {
font-style: italic;
}
&.-u {
text-decoration: underline;
}
&.-s {
text-decoration: line-through;
}
&.-sub {
vertical-align: sub;
font-size: 0.5em;
}
&.-del::before {
content: '- ';
font-weight: 400;
}
&.-h1::before {
content: '§ ';
font-weight: 400;
}
&.-del {
color: var(--color-red-900);
border-bottom: 1px solid var(--color-red-900);
background-color: var(--color-red-50);
}
&.-a::before {
content: "🔗 ";
}
&.-ul::before {
content: "● ";
}
&.-ol::before {
content: "1. ";
}
&.-var::before {
content: "∫ ";
}
&.-var {
font-weight: bold;
font-style: italic;
}
&.-details:before {
content: "&rarr;";
}
&.-details {
text-decoration: dotted;
border: 1px dashed var(--color-blue-gray-200);
}
&.-pre::before {
content: "...";
display: inline-block;
background-color: var(--color-blue-gray-100);
color: var(--color-blue-grey-900);
border-radius: 2px;
position: absolute;
left: 0;
top: 0;
padding: 0 3px;
text-transform: uppercase;
font-size: 0.8em;
line-height: 10px;
}
&.-pre {
background-color: var(--color-blue-gray-50);
color: var(--color-blue-grey-900);
padding-left: 15px;
}
&.-ins::before {
content: '+ ';
font-weight: 400;
}
&.-ins {
color: var(--color-green-900);
border-bottom: 1px solid var(--color-green-900);
background-color: var(--color-green-50);
}
&.-sup {
vertical-align: super;
font-size: 0.5em;
}
&.-q:before {
content: open-quote;
}
&.-samp:before {
content: '> ';
color: var(--color-blue-gray-300);
font-family: sans-serif;
}
&.-samp {
background-color: var(--color-blue-gray-50);
border-bottom: 1px solid var(--color-blue-gray-300);
}
&.-blockquote::before {
content: '❝';
font-size: 1em;
color: #F57F17;
display: block;
position: absolute;
top: 0px;
left: 4px;
user-select: none;
}
&.-blockquote {
background-color: var(--color-amber-50);
color: #412207;
padding-left: 15px;
border-left: 2px solid #F57F17;
}
&.-time:before {
content: "📅 ";
}
&.-img:before {
content: "🌅 ";
}
&.-video:before {
content: "🎦 ";
}
&.-audio:before {
content: "🎵 ";
}
&.-details:before {
content: "▸ ";
}
&.-code {
content: "<code>";
background-color: var(--color-blue-gray-50);
color: var(--color-blue-grey-900);
}
&.-strong {
background-color: var(--color-deep-orange-50);
color: var(--color-deep-orange-900);
font-weight: 400;
}
&.-abbr {
color: #1A237E;
}
&.-q {
color:#000;
background-color: #FFF8E1;
}
&.-small {
font-size: 0.5em;
}
&.-dfn {
color: var(--color-blue-900);
font-style: italic;
}
&.-mark {
background-color: var(--color-lime-100);
color: var(--color-lime-900);
&:hover {
background-color: var(--color-lime-200);
color: var(--color-lime-900);
}
}
&.-kbd {
background: var(--color-blue-gray-50);
outline: none;
padding: 3px 6px;
border-radius: 3px;
border: 1px solid var(--color-blue-gray-200);
border-bottom: 3px solid var(--color-blue-gray-200);
color: #333;
}
}
&_ia {
display: flex;
@ -148,11 +456,10 @@
position: fixed;
bottom:0;
width: 100%;
background: var(--color-blue-gray-50);
padding:3px;
border-radius: 3px;
border: 1px solid var(--color-blue-gray-300);
box-sizing: border-box;
background-color: var(--wc-wysiwyg-light);
border-radius: 5px;
padding: 5px;
& > form {
&:nth-child(1n+2) {
margin-top: 10px;
@ -184,7 +491,8 @@
background-color: var(--color-blue-200);
color: var(--color-blue-gray-800);
padding: 3px 3px 3px 5px;
display: flex;
margin: 5px 0;
display: inline-flex;
align-items: center;
border-radius: 6px;
margin-right: 5px;
@ -240,3 +548,22 @@
display: none;
}
}
@media (prefers-color-scheme: dark) {
.wc-wysiwyg {
background-color: var(--wc-wysiwyg-dark);
&_di {
background-color: var(--wc-wysiwyg-dark);
}
&_bt {
background-color: var(--wc-wysiwyg-dark);
}
&_btn {
background-color: rgba(0,0,0,0.5);
color: #ccc;
&:hover {
background-color: rgba(0,0,0,0.5);
color: #ccc;
}
}
}
}

342
src/wc-wysiwyg.ts
View File

@ -1,18 +1,14 @@
import {t} from './core/translates.js';
import { t } from './core/translates.js';
import { el } from "./core/el.js";
interface WCWYSIWYGTag {
tag:string
method?:Function,
hint?:string,
is?: string,
}
interface WCWYSIWYGActions {
wrapTag: Function,
insertImageBlock: Function,
insertAudio: Function,
insertVideo: Function,
}
import test from './extensions/colorerDialog.js';
import test2 from './extensions/presetList.js';
/**
* Translate function
* @param key:string phrase key
* @param lang:string language key defaul navigatol.language
* @returns
*/
const _t = (key:string, lang = navigator.language):string => t[lang] ? t[lang][key] || "-" : t["en"][key];
//All semantic html5 known editor tags
const allTags = [
@ -52,13 +48,30 @@ const allTags = [
{ tag: 'blockquote'},
{ tag: 'details'},
] as WCWYSIWYGTag[];
/**
* Base class for WCWYSIWYG web component
*/
class WCWYSIWYG extends HTMLElement {
/**
* Tags included to action bar in editor
*/
public EditorTags:WCWYSIWYGTag[]
/**
* Custom tags included to action bar in editor
*/
public EditorCustomTags:WCWYSIWYGTag[]
//Content editable wc-editor element
/**
* Main ContentEditable element
*/
public EditorNode:HTMLElement
/**
* Editor actions block elements with EditorTags buttons
*/
public EditorActionsSection:HTMLElement
/**
* Custom web-components buttons <fieldset>
*/
public EditorCustomTagsForm?:HTMLElement
//Inline edites
public EditorInlineActions:any[]
public EditorInlineDialog:HTMLDialogElement
@ -66,7 +79,7 @@ class WCWYSIWYG extends HTMLElement {
//Editor props
public EditorPropertyForm?:HTMLElement
//Clear btn
public EditorClearFormatBtn:HTMLElement
public EditorClearFormatBtn:HTMLButtonElement
//Autocomplete area
public EditorAutoCompleteForm?:HTMLElement
//Bottom actions
@ -75,7 +88,6 @@ class WCWYSIWYG extends HTMLElement {
public EditorBottomFormViewToggle?:HTMLElement
public EditorPreviewText:HTMLTextAreaElement
public EditorCustomTagsForm?:HTMLElement
public EditorTagsMethods:WCWYSIWYGActions
public EditorAllowTags:string[]
public EditorFullScreenButton?:HTMLElement
@ -86,19 +98,21 @@ class WCWYSIWYG extends HTMLElement {
#EditProps:boolean|object
#Autocomplete:boolean
#Extensions?: any[]
#SotrageKey:string|null
#HideBottomActions:boolean
#Connected:boolean = false;
constructor() {
super();
this.#checkExtensions();
this.classList.add('wc-wysiwyg');
//Listen root element events
this.onpointerup = (event) => {
const selection = window.getSelection();
const editorSelection = this.getSelection();
//if check exist selection string
if(selection !== null && selection.toString().length > 0) {
if(editorSelection.selection !== null && editorSelection.selection.text !== null) {
this.EditorInlineActionsForm.style.display = '';
if(this.EditorPropertyForm){
this.EditorPropertyForm.style.display = 'none';
@ -116,6 +130,25 @@ class WCWYSIWYG extends HTMLElement {
connectedCallback() {
if(this.#Connected === false) {
const asyncExtensions = this.getAttribute('data-async-extensions') || false;
if(asyncExtensions !== false) {
const asyncExtensionsPaths = asyncExtensions.split(',');
console.log('need load', asyncExtensionsPaths);
asyncExtensionsPaths.forEach((extensionPath:string) => {
import(extensionPath).then(esm => {
console.log('asyncExtensionsPaths loaded', esm);
const Extension = new esm.default(this);
if(typeof Extension.connectedCallback === 'function') {
Extension.connectedCallback();
}
if(this.#Extensions instanceof Array) {
this.#Extensions.push(Extension);
} else {
this.#Extensions = [Extension];
}
});
})
}
//Check Tags
const allowTags = this.getAttribute('data-allow-tags') || allTags.map(t => t.tag).join(',');
@ -138,30 +171,39 @@ class WCWYSIWYG extends HTMLElement {
//allow inline without ['video','audio','img']
this.EditorInlineActions = this.EditorTags.filter(action => ['video','audio','img'].includes(action.tag) === false);
this.EditorActionsSection = el('section', { classList: ['wc-wysiwyg_ec'] });
//Clear format button
this.EditorClearFormatBtn = el('button', {
classList: ['wc-wysiwyg_btn', '-clear'],
attrs: {
'data-hint': this.#t('clearFormat'),
'data-hint': _t('clearFormat'),
},
props: {
innerHTML:'Ⱦ',
},
});
//Inline selection actions panel
this.EditorInlineActionsForm = el('form');
this.EditorInlineDialog = el('dialog', {
classList: ['wc-wysiwyg_di'],
append: [this.EditorInlineActionsForm, this.EditorClearFormatBtn],
props: {
//prevent submit
onsubmit: event => {
event.preventDefault();
event.stopPropagation();
},
}
//Top editor actions sections
this.EditorActionsSection = el('section', {
classList: ['wc-wysiwyg_ec'],
});
this.#makeActionButtons(this.EditorActionsSection, this.EditorTags);
this.EditorActionsSection.append(this.EditorClearFormatBtn);
//Inline selection actions panel
// this.EditorInlineActionsForm = el('form');
// this.EditorInlineDialog = el('dialog', {
// classList: ['wc-wysiwyg_di'],
// append: [this.EditorInlineActionsForm],
// props: {
// //prevent submit
// onsubmit: event => {
// event.preventDefault();
// event.stopPropagation();
// },
// },
// attrs: {
// tabIndex: -1,
// }
// });
//Edit props
if(this.#EditProps) {
@ -172,12 +214,12 @@ class WCWYSIWYG extends HTMLElement {
props: {
onsubmit: event => {
event.preventDefault();
this.hideEditorInlineDialog();
this.EditorPropertyForm.style.display = 'none';
},
onpointerup: event => event.stopPropagation(),
}
});
this.EditorInlineDialog.append(this.EditorPropertyForm);
this.EditorActionsSection.append(this.EditorPropertyForm);
}
//Autocomplete form
@ -210,11 +252,11 @@ class WCWYSIWYG extends HTMLElement {
//Custom panel tags
this.EditorCustomTagsForm = el('fieldset', {
classList: ['wc-wysiwyg_ce'],
});
}) as HTMLElement;
//Make custom actions buttons panel
this.#makeActionButtons(this.EditorCustomTagsForm as HTMLElement, this.EditorCustomTags);
this.#makeActionButtons(this.EditorCustomTagsForm, this.EditorCustomTags);
this.appendChild(this.EditorCustomTagsForm as HTMLElement);
this.EditorActionsSection.prepend(this.EditorCustomTagsForm);
}
//Node editable
@ -238,19 +280,32 @@ class WCWYSIWYG extends HTMLElement {
},
//Check hot keys is pressed
onkeydown: event => {
this.#checkKeyBindings(event)
this.#checkKeyBindings(event);
},
onpaste: (event:ClipboardEvent) => {
// if(event.type === 'paste') {
// window.navigator.clipboard.readText().then(text => {
// const target = event.target as HTMLElement;
// //Check isnert html symbol
// if(text.startsWith('&#') === false) {
// if(target.tagName === 'BR') {
// target.insertAdjacentText('afterend',text);
// }
// this.updateContent();
// event.preventDefault();
// event.stopPropagation();
// return false;
// }
// });
// }
}
},
});
//Make action buttons
this.#makeActionButtons(this.EditorActionsSection, this.EditorTags);
this.#makeActionButtons(this.EditorInlineActionsForm, this.EditorInlineActions);
//Inser wc-editor after textarea node
this.append(
this.EditorActionsSection,
this.EditorInlineDialog,
this.EditorNode,
);
@ -259,7 +314,7 @@ class WCWYSIWYG extends HTMLElement {
this.EditorBottomFormViewToggle = el('button', {
classList: ['wc-wysiwyg_btn'],
attrs: {
'data-hint': this.#t('toggleViewMode'),
'data-hint': _t('toggleViewMode'),
'data-mode': 'html5',
},
props: {
@ -281,11 +336,11 @@ class WCWYSIWYG extends HTMLElement {
this.EditorBottomFormNewP = el('button', {
classList: ['wc-wysiwyg_btn'],
attrs: {
'data-hint': this.#t('addNewParahraph'),
'data-hint': _t('addNewParahraph'),
},
props: {
type:'button',
innerText: '+ P',
innerText: '+ ❡',
onpointerup: event => {
const P = el('p', {props: {innerText: '/'}});
this.EditorNode.appendChild(P);
@ -297,7 +352,7 @@ class WCWYSIWYG extends HTMLElement {
this.EditorFullScreenButton = el('button', {
classList: ['wc-wysiwyg_btn'],
attrs: {
'data-hint': this.#t('fullScreen'),
'data-hint': _t('fullScreen'),
},
props: {
type: "button",
@ -319,14 +374,16 @@ class WCWYSIWYG extends HTMLElement {
this.EditorNode.innerHTML = this.EditorPreviewText.value;
//Check local storage key
this.#SotrageKey = this.getAttribute('data-storage');
console.log('storage key is ', this.#SotrageKey);
if(this.#SotrageKey) {
let storeValue = window.localStorage.getItem(this.#SotrageKey);
console.log('restore from storage', storeValue);
if(storeValue) {
this.EditorNode.innerHTML = storeValue;
}
}
//Check and call connectedCallback in extensions
if(this.#Extensions instanceof Array) {
this.#Extensions.forEach(extension => typeof extension.connectedCallback === 'function' ? extension.connectedCallback(this) : false);
}
this.updateContent();
this.#Connected = true;
@ -337,14 +394,20 @@ class WCWYSIWYG extends HTMLElement {
* Update content value and update behaviors
*/
updateContent() {
// Update the value of the editor node to the current innerHTML
this.value = this.EditorNode.innerHTML;
// Update the value of the EditorPreviewText to the current value
this.EditorPreviewText.value = this.value;
// Check the validity of the current value
this.checkValidity();
// Dispatch an event to indicate that the input has been changed
this.dispatchEvent(new Event('oninput', { bubbles: true, cancelable: false }));
// Update the preview element with the data attribute 'data-preview-el'
this.updatePreviewEl(this.getAttribute('data-preview-el'));
//Update storage value if StorageKey exits
if(this.#SotrageKey) {
window.localStorage.setItem(this.#SotrageKey, this.value);
}
this.dispatchEvent(new Event('oninput', { bubbles: true, cancelable: false }));
this.updatePreviewEl(this.getAttribute('data-preview-el'));
}
/**
@ -372,19 +435,19 @@ class WCWYSIWYG extends HTMLElement {
if(this.getAttribute('required') !== null) {
if(String(this.EditorNode.textContent).length === 0) {
hasErros = true;
errors.push(this.#t('required'));
errors.push(_t('required'));
}
}
if(Number(this.getAttribute('minlength'))) {
if(String(this.EditorNode.textContent).length < Number(this.getAttribute('minlength'))) {
hasErros = true;
errors.push(`${this.#t('minlength')} ${this.getAttribute('minlength')}`);
errors.push(`${_t('minlength')} ${this.getAttribute('minlength')}`);
}
}
if(Number(this.getAttribute('maxlength'))) {
if(String(this.EditorNode.textContent).length > Number(this.getAttribute('maxlength'))) {
hasErros = true;
errors.push(`${this.#t('maxlength')} ${this.getAttribute('maxlength')}`);
errors.push(`${_t('maxlength')} ${this.getAttribute('maxlength')}`);
}
}
const filterTags = this.getAttribute('filtertags');
@ -394,7 +457,7 @@ class WCWYSIWYG extends HTMLElement {
const checkTag = disallowTags[i];
if(this.EditorNode.querySelector(checkTag)) {
hasErros = true;
errors.push(`${this.#t('filtertags')} ${checkTag}`);
errors.push(`${_t('filtertags')} ${checkTag}`);
break;
}
}
@ -422,17 +485,17 @@ class WCWYSIWYG extends HTMLElement {
*/
#checkAutoComplete() {
//CHeck autococmplete
const Selecton = window.getSelection();
if(Selecton !== null && Selecton.anchorNode !== null) {
const SelectionParentEl = Selecton.anchorNode.parentElement as HTMLParagraphElement;
const editorSelection = this.getSelection();
if(editorSelection.selection !== null && editorSelection.selection.anchorNode !== null) {
const SelectionParentEl = editorSelection.selection.anchorNode.parentElement as HTMLParagraphElement;
const AutoCompleteForm = this.EditorAutoCompleteForm as HTMLElement;
if(SelectionParentEl !== null &&
//if empty selection
Selecton.toString() === '' &&
//and parent node is <p>
SelectionParentEl.nodeName === 'P' &&
//and parent <p> is parentElement in EditorNode
SelectionParentEl.parentElement === this.EditorNode) {
//if empty selection
editorSelection.text === null &&
//and parent node is <p>
SelectionParentEl.nodeName === 'P' &&
//and parent <p> is parentElement in EditorNode
SelectionParentEl.parentElement === this.EditorNode) {
//and parent <p> inner text starts with `/`
if(SelectionParentEl.innerText.startsWith('/')) {
const parsedTagName = SelectionParentEl.innerText.replace('/', '');
@ -443,7 +506,7 @@ class WCWYSIWYG extends HTMLElement {
AutoCompleteForm?.appendChild(el('button', {
classList: ['wc-wysiwyg_btn', `-${action.tag}`],
attrs: {
'data-hint': this.#t(action.tag) || null,
'data-hint': _t(action.tag) || null,
},
props: {
type: 'submit',
@ -462,7 +525,7 @@ class WCWYSIWYG extends HTMLElement {
}
}
}
}
}
}
}
@ -470,7 +533,17 @@ class WCWYSIWYG extends HTMLElement {
* Show and position inline actions dialog at targetNode
**/
showEditorInlineDialog() {
this.EditorInlineDialog.show();
//Save selection range
const editorSelection = this.getSelection();
if(editorSelection.selection !== null) {
const range = editorSelection.selection.getRangeAt(0).cloneRange();
this.EditorInlineDialog.show();
//Restore selection range after dialog show
editorSelection.selection.removeAllRanges();
editorSelection.selection.addRange(range);
} else {
this.EditorInlineDialog.show();
}
}
/**
@ -488,19 +561,20 @@ class WCWYSIWYG extends HTMLElement {
* @param event
*/
#checkCanClearElement(event:Event) {
const eventTarget = event.target as HTMLElement;
const eventTarget = event.target as HTMLElement,
clearBtn = this.EditorClearFormatBtn;
if(eventTarget !== this.EditorNode) {
if(eventTarget.nodeName !== 'P'
&& eventTarget.nodeName !== 'SPAN') {
this.EditorClearFormatBtn.style.display = 'inline-block';
this.EditorClearFormatBtn.innerHTML = `Ⱦ ${eventTarget.nodeName}`,
this.EditorClearFormatBtn.onpointerup = (event) => {
clearBtn.style.display = 'inline-block';
clearBtn.innerHTML = `Ⱦ ${eventTarget.nodeName}`,
clearBtn.onpointerup = (event) => {
eventTarget.replaceWith(document.createTextNode(eventTarget.textContent));
}
};
this.showEditorInlineDialog();
} else {
this.EditorClearFormatBtn.style.display = 'none';
this.EditorClearFormatBtn.onpointerup = null;
clearBtn.style.display = 'none';
clearBtn.onpointerup = null;
}
}
}
@ -515,8 +589,11 @@ class WCWYSIWYG extends HTMLElement {
if(this.#EditProps[eventTarget.nodeName]) {
const props = this.#EditProps[eventTarget.nodeName];
event.stopPropagation();
this.dispatchEvent(new CustomEvent('editprops', {
detail: { eventTarget }
}));
this.EditorPropertyForm.style.display = '';
this.showEditorInlineDialog();
this.EditorPropertyForm.style.display = 'block';
this.EditorPropertyForm.setAttribute('data-tag', eventTarget.nodeName);
this.EditorPropertyForm.innerHTML = '';
for (let i = 0; i < props.length; i++) {
@ -567,18 +644,21 @@ class WCWYSIWYG extends HTMLElement {
if(event.altKey) {
//alt+space - move caret to parent node next sibling
if(event.code === 'Space') {
const Selection = window.getSelection();
if(Selection?.type === 'Caret') {
//insertAdjacentElement dont support textNodes, first insert span
const span = el('span');
Selection?.anchorNode?.parentElement?.insertAdjacentElement('afterend', span)
//after replace span with textnode and select it
const textN = document.createTextNode('&nbsp');
span.replaceWith(textN);
const range = document.createRange();
range.selectNodeContents(textN);
Selection.removeAllRanges();
Selection.addRange(range);
const editorSelection = this.getSelection();
const Selection = editorSelection.selection;
if(Selection !== null) {
if(Selection.type === 'Caret') {
//insertAdjacentElement dont support textNodes, first insert span
const span = el('span');
Selection.anchorNode?.parentElement?.insertAdjacentElement('afterend', span)
//after replace span with textnode and select it
const textN = document.createTextNode('&nbsp');
span.replaceWith(textN);
const range = document.createRange();
range.selectNodeContents(textN);
Selection.removeAllRanges();
Selection.addRange(range);
}
}
}
}
@ -588,7 +668,7 @@ class WCWYSIWYG extends HTMLElement {
}
//enter - set p as default tag in newline
if(event.code === 'Enter' && event.shiftKey === false) {
const Selection = window.getSelection();
const Selection = this.getSelection().selection;
let tagName = 'p';
//tags with return default browser behavior
if(['LI', 'ARTICLE', 'P'].includes(Selection.anchorNode.parentElement.tagName)) {
@ -616,7 +696,7 @@ class WCWYSIWYG extends HTMLElement {
const button = el('button', {
classList: ['wc-wysiwyg_btn', `-${action.tag}`],
props: {
tabIndex: -1,
tabIndex: 0,
type:'button',
textContent: action.is ? `${action.tag} is=${action.is}` : action.tag,
onpointerup: (event) => {
@ -625,8 +705,8 @@ class WCWYSIWYG extends HTMLElement {
},
},
attrs: {
'data-hint': action.hint ? action.hint : this.#t(action.tag) || '-',
}
'data-hint': action.hint ? action.hint : _t(action.tag) || '-',
},
});
toEl.appendChild(button);
}
@ -679,11 +759,14 @@ class WCWYSIWYG extends HTMLElement {
/**
* Wrap content in <tag>
* @param tag:WCWYSIWYGTag
**/
#wrapTag = (tag:WCWYSIWYGTag, is:boolean|string = false) => {
//First check if this tag is list item
const listTag = ['ul', 'ol'].includes(tag.tag) ? tag.tag : false;
//If list tag is true - set newTag is list item as <li>
const newtag = listTag !== false ? 'li' : tag.tag;
const Selection = window.getSelection();
const Selection = this.getSelection().selection;
let defaultOptions = {} as any;
if(is) {
defaultOptions.options = {is};
@ -705,6 +788,8 @@ class WCWYSIWYG extends HTMLElement {
tagNode.innerText = tag;
}
this.updateContent();
//Check if new tag has editable props
this.#checkEditProps({target:tagNode, stopPropagation: () => false});
}
}
@ -755,13 +840,46 @@ class WCWYSIWYG extends HTMLElement {
}
/**
* Translate function
* @param key:string phrase key
* @returns
* Check available extensions in global scope
*/
#t(key:string):string {
let lang = this.lang;
return t[lang] ? t[lang][key] || "-" : t["en"][key];
#checkExtensions() {
// Check extensions in global
const _WCWYSIWYG = window._WCWYSIWYG;
console.log('#checkExtensions',_WCWYSIWYG);
if(_WCWYSIWYG !== undefined && _WCWYSIWYG.extensions.length > 0) {
this.#Extensions = [];
for (let i = 0; i < _WCWYSIWYG.extensions.length; i++) {
const Extension = new _WCWYSIWYG.extensions[i](this);
this.#Extensions.push(Extension);
}
}
}
/**
* Get selection info from editor
* @returns editorSelection
*/
getSelection() {
const windowSelection = window.getSelection();
const editorSelection = {
selection: null,
element: null,
text: null,
node: null,
};
if(windowSelection !== null) {
editorSelection.selection = windowSelection;
editorSelection.node = windowSelection.anchorNode;
editorSelection.element = windowSelection.anchorNode.parentElement;
let selectionText = windowSelection.toString();
if(selectionText.length > 0) {
editorSelection.text = selectionText;
}
}
console.log('wc selection', editorSelection);
return editorSelection;
}
//define WCWYSIWYG as custom element
static define(name = 'wc-wysiwyg') {
@ -770,3 +888,27 @@ class WCWYSIWYG extends HTMLElement {
}
export default WCWYSIWYG;
export const define = WCWYSIWYG.define;
export interface WCWYSIWYGTag {
// The HTML tag name
tag: string,
// Optional method to be called when the tag is used
method?: Function,
// Optional hint to be displayed when the tag button is pressed\hovered
hint?: string,
// Optional string to specify the custom tag element
is?: string,
}
export interface WCWYSIWYGActions {
wrapTag: Function,
insertImageBlock: Function,
insertAudio: Function,
insertVideo: Function,
}
declare global {
interface Window {
_WCWYSIWYG: {
extensions?:any[],
asyncExtensions?:string[],
}
}
}