@alitons/ckeditor5 0.0.2

package/sample/styles.css

@@ -0,0 +1,510 @@
+/**
+ * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * This file is licensed under the terms of the MIT License (see LICENSE.md).
+ */
+
+:root {
+	--ck-sample-base-spacing: 2em;
+	--ck-sample-color-white: #fff;
+	--ck-sample-color-green: #279863;
+	--ck-sample-color-blue: #1a9aef;
+	--ck-sample-container-width: 1285px;
+	--ck-sample-sidebar-width: 350px;
+	--ck-sample-editor-min-height: 400px;
+	--ck-sample-editor-z-index: 10;
+}
+
+/* --------- EDITOR STYLES  ---------------------------------------------------------------------------------------- */
+
+.editor__editable,
+/* Classic build. */
+main .ck-editor[role='application'] .ck.ck-content,
+/* Decoupled document build. */
+.ck.editor__editable[role='textbox'],
+.ck.ck-editor__editable[role='textbox'],
+/* Inline & Balloon build. */
+.ck.editor[role='textbox'] {
+	width: 100%;
+	background: #fff;
+	font-size: 1em;
+	line-height: 1.6em;
+	min-height: var(--ck-sample-editor-min-height);
+	padding: 1.5em 2em;
+}
+
+.ck.ck-editor__editable {
+	background: #fff;
+	border: 1px solid hsl(0, 0%, 70%);
+	width: 100%;
+}
+
+/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
+.ck.ck-editor__editable {
+	position: relative;
+	z-index: var(--ck-sample-editor-z-index);
+}
+
+.editor-container {
+	display: flex;
+	flex-direction: row;
+    flex-wrap: nowrap;
+    position: relative;
+	width: 100%;
+	justify-content: center;
+}
+
+/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
+[data-editor='DecoupledEditor'] .document-editor__toolbar {
+	width: 100%;
+}
+
+[data-editor='DecoupledEditor'] .collaboration-demo__editable,
+[data-editor='DecoupledEditor'] .row-editor .editor {
+	/* A pixel is added for each of the border. */
+	width: calc(21cm + 2px);
+	min-height: calc(29.7cm + 2px);
+	/* To avoid having extra scrolls inside the editor container. */
+	height: fit-content;
+	padding: 2cm 1.2cm;
+	margin: 2.5rem;
+	border: 1px hsl( 0, 0%, 82.7% ) solid;
+	background-color: var(--ck-sample-color-white);
+	box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
+	box-sizing: border-box;
+}
+
+[data-editor='DecoupledEditor'] .row-editor {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	overflow-y: auto;
+	background-color: #f2f2f2;
+	border: 1px solid hsl(0, 0%, 77%);
+	/* Limit the max-height of the editor to avoid scrolling from bottom to top to see the toolbar. */
+	max-height: 700px;
+}
+
+[data-editor='DecoupledEditor'] .sidebar {
+	background: transparent;
+	border: 0;
+	box-shadow: none;
+}
+
+/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */
+.sidebar {
+	padding: 0 15px;
+	position: relative;
+	min-width: var(--ck-sample-sidebar-width);
+	max-width: var(--ck-sample-sidebar-width);
+	font-size: 20px;
+	border: 1px solid hsl(0, 0%, 77%);
+	background: hsl(0, 0%, 98%);
+	border-left: 0;
+	overflow: hidden;
+	min-height: 100%;
+	flex-grow: 1;
+}
+
+/* Do not inherit styles related to the editable editor content. See line 25.*/
+.sidebar .ck-content[role='textbox'],
+.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
+	min-height: unset;
+	width: unset;
+	padding: 0;
+	background: transparent;
+}
+
+.sidebar.narrow {
+	min-width: 60px;
+	flex-grow: 0;
+}
+
+.sidebar.hidden {
+	display: none !important;
+}
+
+#sidebar-display-toggle {
+	position: absolute;
+	z-index: 1;
+	width: 30px;
+	height: 30px;
+	text-align: center;
+	left: 15px;
+	top: 30px;
+	border: 0;
+	padding: 0;
+	color: hsl( 0, 0%, 50% );
+	transition: 250ms ease color;
+	background-color: transparent;
+}
+
+#sidebar-display-toggle:hover {
+	color: hsl( 0, 0%, 30% );
+	cursor: pointer;
+}
+
+#sidebar-display-toggle:focus,
+#sidebar-display-toggle:active {
+	outline: none;
+	border: 1px solid #a9d29d;
+}
+
+#sidebar-display-toggle svg {
+	fill: currentColor;
+}
+
+/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */
+.row-presence {
+	width: 100%;
+	border: 1px solid hsl(0, 0%, 77%);
+	border-bottom: 0;
+	background: hsl(0, 0%, 98%);
+	padding: var(--ck-spacing-small);
+
+	/* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */
+	box-shadow: 0 1px 0 0 hsl(0, 0%, 77%);
+
+	/* Make `z-index` bigger than `.editor` to properly display tooltips. */
+	z-index: 20;
+}
+
+.ck.ck-presence-list {
+    flex: 1;
+    padding: 1.25rem .75rem;
+}
+
+.presence .ck.ck-presence-list__counter {
+	order: 2;
+	margin-left: var(--ck-spacing-large)
+}
+
+/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */
+.collaboration-demo__row {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	overflow-y: auto;
+	background-color: #f2f2f2;
+	border: 1px solid hsl(0, 0%, 77%);
+}
+
+body[data-editor='InlineEditor'] .collaboration-demo__row {
+	border: 0;
+}
+
+.collaboration-demo__container {
+	max-width: var(--ck-sample-container-width);
+	margin: 0 auto;
+	padding: 1.25rem;
+}
+
+.presence, .collaboration-demo__row {
+	transition: .2s opacity;
+}
+
+.collaboration-demo__topbar {
+	background: #fff;
+	border: 1px solid var(--ck-color-toolbar-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 0;
+    border-radius: 4px 4px 0 0;
+}
+
+.collaboration-demo__topbar .btn {
+	margin-right: 1em;
+	outline-offset: 2px;
+	outline-width: 2px;
+	background-color: var( --ck-sample-color-blue );
+}
+
+.collaboration-demo__topbar .btn:focus,
+.collaboration-demo__topbar .btn:hover {
+	border-color: var( --ck-sample-color-blue );
+}
+
+.collaboration-demo__share {
+	display: flex;
+	align-items: center;
+	padding: 1.25rem .75rem
+}
+
+.collaboration-demo__share-description p {
+	margin: 0;
+	font-weight: bold;
+	font-size: 0.9em;
+}
+
+.collaboration-demo__share input {
+	height: auto;
+	font-size: 0.9em;
+	min-width: 220px;
+	margin: 0 10px;
+	border-radius: 4px;
+	border: 1px solid var(--ck-color-toolbar-border)
+}
+
+.collaboration-demo__share button,
+.collaboration-demo__share input {
+	height: 40px;
+	padding: 5px 10px;
+}
+
+.collaboration-demo__share button {
+	position: relative;
+}
+
+.collaboration-demo__share button:focus {
+	outline: none;
+}
+
+.collaboration-demo__share button[data-tooltip]::before,
+.collaboration-demo__share button[data-tooltip]::after {
+	position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: all .15s cubic-bezier(.5,1,.25,1);
+	z-index: 1;
+}
+
+.collaboration-demo__share button[data-tooltip]::before {
+	content: attr(data-tooltip);
+    padding: 5px 15px;
+    border-radius: 3px;
+    background: #111;
+    color: #fff;
+    text-align: center;
+    font-size: 11px;
+	top: 100%;
+    left: 50%;
+    margin-top: 5px;
+    transform: translateX(-50%);
+}
+
+.collaboration-demo__share button[data-tooltip]::after {
+    content: '';
+	border: 5px solid transparent;
+    width: 0;
+    font-size: 0;
+    line-height: 0;
+	top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom: 5px solid #111;
+	border-top: none;
+}
+
+.collaboration-demo__share button[data-tooltip]:hover:before,
+.collaboration-demo__share button[data-tooltip]:hover:after {
+	visibility: visible;
+    opacity: 1;
+}
+
+.collaboration-demo--ready {
+	overflow: visible;
+	height: auto;
+}
+
+.collaboration-demo--ready .presence,
+.collaboration-demo--ready .collaboration-demo__row {
+	opacity: 1;
+}
+
+/* --------- PAGINATION FEATURE ------------------------------------------------------------------------------------ */
+
+/* Pagination view line must be stacked at least at the same level as the editor,
+   otherwise it will be hidden underneath. */
+.ck.ck-pagination-view-line {
+	z-index: var(--ck-sample-editor-z-index);
+}
+
+/* --------- REVISION HISTORY FEATURE ------------------------------------------------------------------------------ */
+
+.revision-viewer-container {
+    display: none;
+}
+
+.revision-viewer-sidebar {
+    position: relative;
+    min-width: 310px;
+    overflow: hidden;
+    background: var(--ck-color-toolbar-background);
+    border: 1px solid var(--ck-color-toolbar-border);
+    margin-left: -1px;
+}
+
+/* A case when Pagination and Revision History features are enabled in the editor. */
+/* Move the square with page number from the Pagination plugin to the left side, so that it does not cover the RH sidebar. */
+body[data-revision-history='true'] .ck.ck-pagination-view-line::after {
+	transform: translateX(-100%) !important;
+	left: -1px !important;
+	right: unset !important;
+}
+
+/* --------- DOCUMENT OUTLINE FEATURE ------------------------------------------------------------------------------ */
+
+.document-outline-container {
+	max-height: 80vh;
+	overflow-y: auto;
+	margin-bottom: 1em;
+}
+
+.document-outline-container .ck.ck-document-outline {
+	min-height: 100%;
+	border: 1px solid var(--ck-color-base-border);
+	background-color: hsl(0, 0%, 96%);
+}
+
+/* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */
+body, html {
+	padding: 0;
+	margin: 0;
+
+	font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+body {
+	height: 100%;
+	color: #2D3A4A;
+}
+
+body * {
+	box-sizing: border-box;
+}
+
+a {
+	color: #38A5EE;
+}
+
+header .centered {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+	min-height: 8em;
+}
+
+header h1 a {
+	font-size: 20px;
+	display: flex;
+	align-items: center;
+	color: #2D3A4A;
+	text-decoration: none;
+}
+
+header h1 img {
+	display: block;
+	height: 64px;
+}
+
+header nav ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+header nav ul li {
+	display: inline-block;
+}
+
+header nav ul li + li {
+	margin-left: 1em;
+}
+
+header nav ul li a {
+	font-weight: bold;
+	text-decoration: none;
+	color: #2D3A4A;
+}
+
+header nav ul li a:hover {
+	text-decoration: underline;
+}
+
+main .message {
+	padding: 0 0 var(--ck-sample-base-spacing);
+	background: var(--ck-sample-color-green);
+	color: var(--ck-sample-color-white);
+}
+
+main .message::after {
+	content: "";
+	z-index: -1;
+	display: block;
+	height: 10em;
+	width: 100%;
+	background: var(--ck-sample-color-green);
+	position: absolute;
+	left: 0;
+}
+
+main .message h2 {
+	position: relative;
+	padding-top: 1em;
+	font-size: 2em;
+}
+
+.centered {
+	/* Hide overlapping comments. */
+	overflow: hidden;
+	max-width: var(--ck-sample-container-width);
+	margin: 0 auto;
+	padding: 0 var(--ck-sample-base-spacing);
+}
+
+.row {
+	display: flex;
+	position: relative;
+}
+
+.btn {
+	cursor: pointer;
+	padding: 8px 16px;
+	font-size: 1rem;
+	user-select: none;
+	border-radius: 4px;
+	transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out;
+	background-color: var(--ck-sample-color-button-blue);
+	border-color: var(--ck-sample-color-button-blue);
+	color: var(--ck-sample-color-white);
+	display: inline-block;
+}
+
+.btn--tiny {
+	padding: 6px 12px;
+	font-size: .8rem;
+}
+
+footer {
+	margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing);
+	font-size: .8em;
+	text-align: center;
+	color: rgba(0,0,0,.4);
+}
+
+/* --------- RWD --------------------------------------------------------------------------------------------------- */
+@media screen and ( max-width: 800px ) {
+	:root {
+		--ck-sample-base-spacing: 1em;
+	}
+
+	header h1 {
+		width: 100%;
+	}
+
+	header h1 img {
+		height: 40px;
+	}
+
+	header nav ul {
+		text-align: right;
+	}
+
+	main .message h2 {
+		font-size: 1.5em;
+	}
+}

package/src/ckeditor.js

@@ -0,0 +1,210 @@
+/**
+ * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { DecoupledEditor } from '@ckeditor/ckeditor5-editor-decoupled';
+import { Alignment } from '@ckeditor/ckeditor5-alignment';
+import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
+import { Autosave } from '@ckeditor/ckeditor5-autosave';
+import { Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
+import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
+import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
+import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
+import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
+import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
+import { Heading, Title } from '@ckeditor/ckeditor5-heading';
+import { Highlight } from '@ckeditor/ckeditor5-highlight';
+import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
+import { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';
+import { DataFilter, DataSchema, GeneralHtmlSupport, HtmlComment } from '@ckeditor/ckeditor5-html-support';
+import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';
+import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
+import { TextPartLanguage } from '@ckeditor/ckeditor5-language';
+import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
+import { List, ListProperties, TodoList } from '@ckeditor/ckeditor5-list';
+import { Markdown } from '@ckeditor/ckeditor5-markdown-gfm';
+import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
+import { Mention } from '@ckeditor/ckeditor5-mention';
+import { PageBreak } from '@ckeditor/ckeditor5-page-break';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
+import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
+import { StandardEditingMode } from '@ckeditor/ckeditor5-restricted-editing';
+import { SelectAll } from '@ckeditor/ckeditor5-select-all';
+import { ShowBlocks } from '@ckeditor/ckeditor5-show-blocks';
+import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
+import { SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText } from '@ckeditor/ckeditor5-special-characters';
+import { Style } from '@ckeditor/ckeditor5-style';
+import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
+import { TextTransformation } from '@ckeditor/ckeditor5-typing';
+import { EditorWatchdog } from '@ckeditor/ckeditor5-watchdog';
+import { WordCount } from '@ckeditor/ckeditor5-word-count';
+import { ButtonView } from '@ckeditor/ckeditor5-ui';
+// You can read more about extending the build with additional plugins in the "Installing plugins" guide.
+// See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.
+class Editor extends DecoupledEditor {
+}
+
+Editor.builtinPlugins = [
+    Alignment,
+    AutoImage,
+    AutoLink,
+    Autoformat,
+    Autosave,
+    BlockQuote,
+    Bold,
+    CloudServices,
+    Code,
+    CodeBlock,
+    DataFilter,
+    DataSchema,
+    Essentials,
+    FindAndReplace,
+    FontBackgroundColor,
+    FontColor,
+    FontFamily,
+    FontSize,
+    GeneralHtmlSupport,
+    Heading,
+    Highlight,
+    HorizontalLine,
+    HtmlComment,
+    HtmlEmbed,
+    Image,
+    ImageCaption,
+    ImageInsert,
+    ImageResize,
+    ImageStyle,
+    ImageToolbar,
+    ImageUpload,
+    Indent,
+    IndentBlock,
+    Italic,
+    Link,
+    LinkImage,
+    List,
+    ListProperties,
+    Markdown,
+    MediaEmbed,
+    Mention,
+    PageBreak,
+    Paragraph,
+    PasteFromOffice,
+    RemoveFormat,
+    SelectAll,
+    ShowBlocks,
+    SourceEditing,
+    SpecialCharacters,
+    SpecialCharactersArrows,
+    SpecialCharactersCurrency,
+    SpecialCharactersEssentials,
+    SpecialCharactersLatin,
+    SpecialCharactersMathematical,
+    SpecialCharactersText,
+    StandardEditingMode,
+    Strikethrough,
+    Style,
+    Subscript,
+    Superscript,
+    Table,
+    TableCaption,
+    TableCellProperties,
+    TableColumnResize,
+    TableProperties,
+    TableToolbar,
+    TextPartLanguage,
+    TextTransformation,
+    Title,
+    TodoList,
+    Underline,
+    WordCount,
+    Timestamp
+];
+Editor.defaultConfig = {
+    extraAllowedContent: 'div[dir,id,lang,title](*){*}',
+    toolbar: {
+        items: [
+            'fontSize',
+            'fontFamily',
+            'heading',
+            'style',
+            '|',
+            'fontColor',
+            'fontBackgroundColor',
+            '|',
+            'bold',
+            'italic',
+            'underline',
+            'strikethrough',
+            '|',
+            'alignment',
+            '|',
+            'numberedList',
+            'bulletedList',
+            '|',
+            'outdent',
+            'indent',
+            '|',
+            'todoList',
+            'link',
+            'blockQuote',
+            'imageUpload',
+            'insertTable',
+            'mediaEmbed',
+            '|',
+            'undo',
+            'redo',
+            '-',
+            'specialCharacters',
+            'restrictedEditingException',
+            'codeBlock',
+            'code',
+            'findAndReplace',
+            'highlight',
+            'htmlEmbed',
+            'horizontalLine',
+            'imageInsert',
+            'pageBreak',
+            'removeFormat',
+            'selectAll',
+            'showBlocks',
+            'sourceEditing',
+            'subscript',
+            'superscript',
+            'textPartLanguage',
+            'timestamp'
+        ],
+        shouldNotGroupWhenFull: true,
+        autoTextoOptions: {
+            options: [
+                {
+                    value: 'Conteudo da opção 1',
+                    label: 'Opção 1'
+                }
+            ]
+        },
+    },
+    language: 'pt-br',
+    image: {
+        toolbar: [
+            'imageTextAlternative',
+            'toggleImageCaption',
+            'imageStyle:inline',
+            'imageStyle:block',
+            'imageStyle:side',
+            'linkImage'
+        ]
+    },
+    table: {
+        contentToolbar: [
+            'tableColumn',
+            'tableRow',
+            'mergeTableCells',
+            'tableCellProperties',
+            'tableProperties'
+        ]
+    }
+};
+export default { Editor, EditorWatchdog };
+//# sourceMappingURL=ckeditor.js.map