Skip to content

Commit ebe2ca7

Browse files
ssddanbrownssddanbrown
committed
Lexical: Added about button/view
Re-used existing route and moved tinymce help to its own different route. Added test to cover. Added new external-content block to support in editor UI.
1 parent f4005a1 commit ebe2ca7

File tree

14 files changed

+388
-170
lines changed

14 files changed

+388
-170
lines changed

‎lang/en/editor.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,8 @@
163163
'about' => 'About the editor',
164164
'about_title' => 'About the WYSIWYG Editor',
165165
'editor_license' => 'Editor License & Copyright',
166+
'editor_lexical_license' => 'This editor is built as a fork of :lexicalLink which is distributed under the MIT license.',
167+
'editor_lexical_license_link' => 'Full license details can be found here.',
166168
'editor_tiny_license' => 'This editor is built using :tinyLink which is provided under the MIT license.',
167169
'editor_tiny_license_link' => 'The copyright and license details of TinyMCE can be found here.',
168170
'save_continue' => 'Save Page & Continue',

‎resources/icons/editor/help.svg renamed to ‎resources/icons/editor/about.svg

File renamed without changes.

‎resources/js/wysiwyg-tinymce/plugins-about.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
function register(editor) {
55
const aboutDialog = {
66
title: 'About the WYSIWYG Editor',
7-
url: window.baseUrl('/help/wysiwyg'),
7+
url: window.baseUrl('/help/tinymce'),
88
};
99

1010
editor.ui.registry.addButton('about', {

‎resources/js/wysiwyg/ui/defaults/buttons/controls.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ import {
1111
} from "lexical";
1212
import redoIcon from "@icons/editor/redo.svg";
1313
import sourceIcon from "@icons/editor/source-view.svg";
14-
import {getEditorContentAsHtml} from "../../../utils/actions";
1514
import fullscreenIcon from "@icons/editor/fullscreen.svg";
15+
import aboutIcon from "@icons/editor/about.svg";
16+
import {getEditorContentAsHtml} from "../../../utils/actions";
1617

1718
export const undo: EditorButtonDefinition = {
1819
label: 'Undo',
@@ -80,4 +81,16 @@ export const fullscreen: EditorButtonDefinition = {
8081
isActive(selection, context: EditorUiContext) {
8182
return context.containerDOM.classList.contains('fullscreen');
8283
}
84+
};
85+
86+
export const about: EditorButtonDefinition = {
87+
label: 'About the editor',
88+
icon: aboutIcon,
89+
async action(context: EditorUiContext, button: EditorButton) {
90+
const modal = context.manager.createModal('about');
91+
modal.show({});
92+
},
93+
isActive(selection, context: EditorUiContext) {
94+
return false;
95+
}
8396
};

‎resources/js/wysiwyg/ui/defaults/forms/controls.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {EditorFormDefinition} from "../../framework/forms";
2-
import {EditorUiContext} from "../../framework/core";
2+
import {EditorUiContext, EditorUiElement} from "../../framework/core";
33
import {setEditorContentFromHtml} from "../../../utils/actions";
4+
import {ExternalContent} from "../../framework/blocks/external-content";
45

56
export const source: EditorFormDefinition = {
67
submitText: 'Save',
@@ -15,4 +16,18 @@ export const source: EditorFormDefinition = {
1516
type: 'textarea',
1617
},
1718
],
19+
};
20+
21+
export const about: EditorFormDefinition = {
22+
submitText: 'Close',
23+
async action() {
24+
return true;
25+
},
26+
fields: [
27+
{
28+
build(): EditorUiElement {
29+
return new ExternalContent('/help/wysiwyg');
30+
}
31+
}
32+
],
1833
};

‎resources/js/wysiwyg/ui/defaults/modals.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {EditorFormModalDefinition} from "../framework/modals";
22
import {details, image, link, media} from "./forms/objects";
3-
import {source} from "./forms/controls";
3+
import {about, source} from "./forms/controls";
44
import {cellProperties, rowProperties, tableProperties} from "./forms/tables";
55

66
export const modals: Record<string, EditorFormModalDefinition> = {
@@ -35,5 +35,9 @@ export const modals: Record<string, EditorFormModalDefinition> = {
3535
details: {
3636
title: 'Edit collapsible block',
3737
form: details,
38+
},
39+
about: {
40+
title: 'About the WYSIWYG Editor',
41+
form: about,
3842
}
3943
};

‎resources/js/wysiwyg/ui/toolbars.ts renamed to ‎resources/js/wysiwyg/ui/defaults/toolbars.ts

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import {EditorButton} from "./framework/buttons";
2-
import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiContext, EditorUiElement} from "./framework/core";
3-
import {EditorFormatMenu} from "./framework/blocks/format-menu";
4-
import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
5-
import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
6-
import {EditorColorPicker} from "./framework/blocks/color-picker";
7-
import {EditorTableCreator} from "./framework/blocks/table-creator";
8-
import {EditorColorButton} from "./framework/blocks/color-button";
9-
import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
1+
import {EditorButton} from "../framework/buttons";
2+
import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiContext, EditorUiElement} from "../framework/core";
3+
import {EditorFormatMenu} from "../framework/blocks/format-menu";
4+
import {FormatPreviewButton} from "../framework/blocks/format-preview-button";
5+
import {EditorDropdownButton} from "../framework/blocks/dropdown-button";
6+
import {EditorColorPicker} from "../framework/blocks/color-picker";
7+
import {EditorTableCreator} from "../framework/blocks/table-creator";
8+
import {EditorColorButton} from "../framework/blocks/color-button";
9+
import {EditorOverflowContainer} from "../framework/blocks/overflow-container";
1010
import {
1111
cellProperties, clearTableFormatting,
1212
copyColumn,
@@ -29,8 +29,8 @@ import {
2929
rowProperties,
3030
splitCell,
3131
table, tableProperties
32-
} from "./defaults/buttons/tables";
33-
import {fullscreen, redo, source, undo} from "./defaults/buttons/controls";
32+
} from "./buttons/tables";
33+
import {about, fullscreen, redo, source, undo} from "./buttons/controls";
3434
import {
3535
blockquote, dangerCallout,
3636
h2,
@@ -41,7 +41,7 @@ import {
4141
paragraph,
4242
successCallout,
4343
warningCallout
44-
} from "./defaults/buttons/block-formats";
44+
} from "./buttons/block-formats";
4545
import {
4646
bold, clearFormating, code,
4747
highlightColor,
@@ -50,22 +50,22 @@ import {
5050
superscript,
5151
textColor,
5252
underline
53-
} from "./defaults/buttons/inline-formats";
53+
} from "./buttons/inline-formats";
5454
import {
5555
alignCenter,
5656
alignJustify,
5757
alignLeft,
5858
alignRight,
5959
directionLTR,
6060
directionRTL
61-
} from "./defaults/buttons/alignments";
61+
} from "./buttons/alignments";
6262
import {
6363
bulletList,
6464
indentDecrease,
6565
indentIncrease,
6666
numberList,
6767
taskList
68-
} from "./defaults/buttons/lists";
68+
} from "./buttons/lists";
6969
import {
7070
codeBlock,
7171
details, detailsEditLabel, detailsToggle, detailsUnwrap,
@@ -75,10 +75,10 @@ import {
7575
image,
7676
link, media,
7777
unlink
78-
} from "./defaults/buttons/objects";
79-
import {el} from "../utils/dom";
80-
import {EditorButtonWithMenu} from "./framework/blocks/button-with-menu";
81-
import {EditorSeparator} from "./framework/blocks/separator";
78+
} from "./buttons/objects";
79+
import {el} from "../../utils/dom";
80+
import {EditorButtonWithMenu} from "../framework/blocks/button-with-menu";
81+
import {EditorSeparator} from "../framework/blocks/separator";
8282

8383
export function getMainEditorFullToolbar(context: EditorUiContext): EditorContainerUiElement {
8484

@@ -201,6 +201,7 @@ export function getMainEditorFullToolbar(context: EditorUiContext): EditorContai
201201
// Meta elements
202202
new EditorOverflowContainer(3, [
203203
new EditorButton(source),
204+
new EditorButton(about),
204205
new EditorButton(fullscreen),
205206

206207
// Test

‎resources/js/wysiwyg/ui/framework/blocks/external-content.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {EditorUiElement} from "../core";
2+
import {el} from "../../../utils/dom";
3+
4+
export class ExternalContent extends EditorUiElement {
5+
6+
/**
7+
* The URL for HTML to be loaded from.
8+
*/
9+
protected url: string = '';
10+
11+
constructor(url: string) {
12+
super();
13+
this.url = url;
14+
}
15+
16+
buildDOM(): HTMLElement {
17+
const wrapper = el('div', {
18+
class: 'editor-external-content',
19+
});
20+
21+
window.$http.get(this.url).then(resp => {
22+
if (typeof resp.data === 'string') {
23+
wrapper.innerHTML = resp.data;
24+
}
25+
});
26+
27+
return wrapper;
28+
}
29+
}

‎resources/js/wysiwyg/ui/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
getImageToolbarContent,
55
getLinkToolbarContent,
66
getMainEditorFullToolbar, getTableToolbarContent
7-
} from "./toolbars";
7+
} from "./defaults/toolbars";
88
import {EditorUIManager} from "./framework/manager";
99
import {EditorUiContext} from "./framework/core";
1010
import {CodeBlockDecorator} from "./decorators/code-block";

‎resources/sass/_editor.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,13 @@ body.editor-is-fullscreen {
350350
text-align: center;
351351
padding: 0.2em;
352352
}
353+
.editor-external-content {
354+
min-width: 500px;
355+
min-height: 500px;
356+
h4:first-child {
357+
margin-top: 0;
358+
}
359+
}
353360

354361
// In-editor elements
355362
.editor-image-wrap {

0 commit comments

Comments
 (0)