mirror of
https://github.com/webislife/wc-wysiwyg.git
synced 2025-07-21 11:32:22 +00:00
update to v1 styles
This commit is contained in:
Денис Строков
@ -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
2
dist/wc-wysiwyg.js
vendored
File diff suppressed because one or more lines are too long
@ -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,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[],
|
||||
|
||||
@ -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,13 +158,12 @@
|
||||
|
||||
&_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 {
|
||||
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);
|
||||
@ -46,13 +176,6 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
/* preview */
|
||||
&_pr {
|
||||
@ -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,16 +209,229 @@
|
||||
}
|
||||
}
|
||||
&_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 {
|
||||
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 {
|
||||
box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9);
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9);
|
||||
}
|
||||
&:active {
|
||||
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: "→";
|
||||
}
|
||||
&.-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;
|
||||
@ -103,34 +439,6 @@
|
||||
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;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: var(--color-blue-gray-100);
|
||||
border-color: var(--color-blue-gray-300);
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--color-blue-500);
|
||||
}
|
||||
&:active {
|
||||
padding-top:2px;
|
||||
background: var(--color-blue-gray-100);
|
||||
border-color: var(--color-blue-gray-700);
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
&.-clear {
|
||||
text-decoration: line-through;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&_ia {
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,14 @@
|
||||
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,13 +485,13 @@ 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() === '' &&
|
||||
editorSelection.text === null &&
|
||||
//and parent node is <p>
|
||||
SelectionParentEl.nodeName === 'P' &&
|
||||
//and parent <p> is parentElement in EditorNode
|
||||
@ -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',
|
||||
@ -470,7 +533,17 @@ class WCWYSIWYG extends HTMLElement {
|
||||
* Show and position inline actions dialog at targetNode
|
||||
**/
|
||||
showEditorInlineDialog() {
|
||||
//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,11 +644,13 @@ 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') {
|
||||
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)
|
||||
Selection.anchorNode?.parentElement?.insertAdjacentElement('afterend', span)
|
||||
//after replace span with textnode and select it
|
||||
const textN = document.createTextNode(' ');
|
||||
span.replaceWith(textN);
|
||||
@ -582,13 +661,14 @@ class WCWYSIWYG extends HTMLElement {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//tag - hide editor dialog
|
||||
if(event.code === 'Escape') {
|
||||
this.hideEditorInlineDialog();
|
||||
}
|
||||
//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[],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user