@onehat/ui 0.1.3 → 0.2.1

package/ckeditor5/sample/styles.css

@@ -0,0 +1,496 @@
+/**
+ * @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. ---------------------------------------------*/
+body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
+	width: 100%;
+}
+
+body[data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
+body[data-editor='DecoupledDocumentEditor'] .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;
+}
+
+body[data-editor='DecoupledDocumentEditor'] .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;
+}
+
+body[data-editor='DecoupledDocumentEditor'] .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;
+}
+
+/* --------- 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/ckeditor5/src/ckeditor.js

@@ -0,0 +1,138 @@
+/**
+ * @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 InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor.js';
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
+import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
+import AutoLink from '@ckeditor/ckeditor5-link/src/autolink.js';
+import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
+import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
+import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices.js';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
+import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
+import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport.js';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
+import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline.js';
+import Image from '@ckeditor/ckeditor5-image/src/image.js';
+import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
+import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js';
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
+import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
+import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock.js';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
+import Link from '@ckeditor/ckeditor5-link/src/link.js';
+import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
+import List from '@ckeditor/ckeditor5-list/src/list.js';
+import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties.js';
+import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
+import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
+import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
+import Table from '@ckeditor/ckeditor5-table/src/table.js';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
+import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
+
+class Editor extends InlineEditor {}
+
+// Plugins to include in the build.
+Editor.builtinPlugins = [
+	Alignment,
+	Autoformat,
+	AutoLink,
+	BlockQuote,
+	Bold,
+	CKFinderUploadAdapter,
+	CloudServices,
+	Essentials,
+	FontColor,
+	FontFamily,
+	FontSize,
+	GeneralHtmlSupport,
+	Heading,
+	HorizontalLine,
+	Image,
+	ImageCaption,
+	ImageInsert,
+	ImageResize,
+	ImageStyle,
+	ImageToolbar,
+	ImageUpload,
+	Indent,
+	IndentBlock,
+	Italic,
+	Link,
+	LinkImage,
+	List,
+	ListProperties,
+	MediaEmbed,
+	Paragraph,
+	PasteFromOffice,
+	Strikethrough,
+	Superscript,
+	Table,
+	TableToolbar,
+	TextTransformation
+];
+
+// Editor configuration.
+Editor.defaultConfig = {
+	toolbar: {
+		items: [
+			'heading',
+			'|',
+			'fontFamily',
+			'fontSize',
+			'fontColor',
+			'|',
+			'bold',
+			'italic',
+			'strikethrough',
+			'superscript',
+			'link',
+			'bulletedList',
+			'numberedList',
+			'horizontalLine',
+			'|',
+			'alignment',
+			'|',
+			'outdent',
+			'indent',
+			'|',
+			'imageUpload',
+			'blockQuote',
+			'insertTable',
+			'imageInsert',
+			'mediaEmbed',
+			'undo',
+			'redo'
+		]
+	},
+	language: 'en',
+	image: {
+		toolbar: [
+			'imageTextAlternative',
+			'toggleImageCaption',
+			'imageStyle:inline',
+			'imageStyle:block',
+			'imageStyle:side',
+			'linkImage'
+		]
+	},
+	table: {
+		contentToolbar: [
+			'tableColumn',
+			'tableRow',
+			'mergeTableCells'
+		]
+	}
+};
+
+export default Editor;

package/ckeditor5/webpack.config.js

@@ -0,0 +1,96 @@
+/**
+ * @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
+ */
+
+'use strict';
+
+/* eslint-env node */
+
+const path = require( 'path' );
+const webpack = require( 'webpack' );
+const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
+const TerserWebpackPlugin = require( 'terser-webpack-plugin' );
+
+module.exports = {
+	devtool: 'source-map',
+	performance: { hints: false },
+
+	entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),
+
+	output: {
+		// The name under which the editor will be exported.
+		library: 'InlineEditor',
+
+		path: path.resolve( __dirname, 'build' ),
+		filename: 'ckeditor.js',
+		libraryTarget: 'umd',
+		libraryExport: 'default'
+	},
+
+	optimization: {
+		minimizer: [
+			new TerserWebpackPlugin( {
+				sourceMap: true,
+				terserOptions: {
+					output: {
+						// Preserve CKEditor 5 license comments.
+						comments: /^!/
+					}
+				},
+				extractComments: false
+			} )
+		]
+	},
+
+	plugins: [
+		new CKEditorTranslationsPlugin( {
+			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+			language: 'en',
+			additionalLanguages: 'all'
+		} ),
+		new webpack.BannerPlugin( {
+			banner: bundler.getLicenseBanner(),
+			raw: true
+		} )
+	],
+
+	module: {
+		rules: [
+			{
+				test: /\.svg$/,
+				use: [ 'raw-loader' ]
+			},
+			{
+				test: /\.css$/,
+				use: [
+					{
+						loader: 'style-loader',
+						options: {
+							injectType: 'singletonStyleTag',
+							attributes: {
+								'data-cke': true
+							}
+						}
+					},
+					{
+						loader: 'css-loader'
+					},
+					{
+						loader: 'postcss-loader',
+						options: {
+							postcssOptions: styles.getPostCssConfig( {
+								themeImporter: {
+									themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+								},
+								minify: true
+							} )
+						}
+					},
+				]
+			}
+		]
+	}
+};