@ckeditor/ckeditor5-show-blocks 0.0.0-nightly-20230629.0

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in the CKEditor 5 repository. See: https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

package/LICENSE.md

@@ -0,0 +1,17 @@
+Software License Agreement
+==========================
+
+**CKEditor 5 show blocks feature** – https://github.com/ckeditor/packages/ckeditor5-show-blocks <br>
+Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

package/README.md

@@ -0,0 +1,21 @@
+CKEditor 5 show blocks feature
+================================
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-show-blocks.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-show-blocks)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
+[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
+![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-show-blocks)
+
+This package contains the show blocks feature for CKEditor 5. It allows to visualize all block-level elements by surrounding them with an outline and displaying their element name at the top-left.
+
+## Demo
+
+Check out the [demo in the show blocks feature](https://ckeditor.com/docs/ckeditor5/latest/features/show-blocks.html#demo) guide.
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-show-blocks` package](https://ckeditor.com/docs/ckeditor5/latest/api/show-blocks.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/) as well as the [Show blocks](https://ckeditor.com/docs/ckeditor5/latest/features/show-blocks.html) feature guide.
+
+## License
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

package/ckeditor5-metadata.json

@@ -0,0 +1,18 @@
+{
+	"plugins": [
+		{
+			"name": "Show blocks",
+			"className": "ShowBlocks",
+			"description": "Allows to display the HTML element names of content blocks.",
+			"docs": "features/show-blocks.html",
+			"path": "src/showblocks.js",
+			"uiComponents": [
+				{
+					"type": "Button",
+					"name": "showBlocks",
+					"iconPath": "theme/icons/show-blocks.svg"
+				}
+			]
+		}
+	]
+}

package/lang/contexts.json

@@ -0,0 +1,3 @@
+{
+	"Show blocks": "The label of the show blocks toolbar button."
+}

package/lang/translations/en.po

@@ -0,0 +1,21 @@
+# Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+msgctxt "The label of the show blocks toolbar button."
+msgid "Show blocks"
+msgstr "Show blocks"

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@ckeditor/ckeditor5-show-blocks",
+  "version": "0.0.0-nightly-20230629.0",
+  "description": "Show blocks feature for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin",
+    "WYSIWYG",
+    "text",
+    "rich-text",
+    "richtext",
+    "ckeditor",
+    "editor",
+    "editing",
+    "html",
+    "contentEditable",
+    "blocks",
+    "content-blocks",
+    "show-blocks"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "ckeditor5": "0.0.0-nightly-20230629.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20230629.0"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=5.7.1"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://ckeditor.com/ckeditor-5",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-show-blocks"
+  },
+  "files": [
+    "lang",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "theme",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "types": "src/index.d.ts"
+}

package/src/augmentation.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { ShowBlocks, ShowBlocksCommand, ShowBlocksEditing, ShowBlocksUI } from './index';
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [ShowBlocks.pluginName]: ShowBlocks;
+        [ShowBlocksEditing.pluginName]: ShowBlocksEditing;
+        [ShowBlocksUI.pluginName]: ShowBlocksUI;
+    }
+    interface CommandsMap {
+        showBlocks: ShowBlocksCommand;
+    }
+}

package/src/augmentation.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks
+ */
+export { default as ShowBlocks } from './showblocks';
+export { default as ShowBlocksCommand } from './showblockscommand';
+export { default as ShowBlocksEditing } from './showblocksediting';
+export { default as ShowBlocksUI } from './showblocksui';
+import './augmentation';

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks
+ */
+export { default as ShowBlocks } from './showblocks';
+export { default as ShowBlocksCommand } from './showblockscommand';
+export { default as ShowBlocksEditing } from './showblocksediting';
+export { default as ShowBlocksUI } from './showblocksui';
+import './augmentation';

package/src/showblocks.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblocks
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ShowBlocksEditing from './showblocksediting';
+import ShowBlocksUI from './showblocksui';
+/**
+ * The show blocks feature.
+ *
+ * For a detailed overview, check the {@glink features/show-blocks Show blocks} feature guide.
+ */
+export default class ShowBlocks extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ShowBlocks";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ShowBlocksEditing, typeof ShowBlocksUI];
+}

package/src/showblocks.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblocks
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ShowBlocksEditing from './showblocksediting';
+import ShowBlocksUI from './showblocksui';
+/**
+ * The show blocks feature.
+ *
+ * For a detailed overview, check the {@glink features/show-blocks Show blocks} feature guide.
+ */
+export default class ShowBlocks extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ShowBlocks';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ShowBlocksEditing, ShowBlocksUI];
+    }
+}

package/src/showblockscommand.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblockscommand
+ */
+import { Command, type Editor } from 'ckeditor5/src/core';
+/**
+ * The show blocks command.
+ *
+ * Displays the HTML element names for content blocks.
+ */
+export default class ShowBlocksCommand extends Command {
+    /**
+     * Flag indicating whether the command is active, i.e. content blocks are displayed.
+     */
+    value: boolean;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * Toggles the visibility of content blocks.
+     */
+    execute(): void;
+}

package/src/showblockscommand.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblockscommand
+ */
+import { Command } from 'ckeditor5/src/core';
+/**
+ * The show blocks command.
+ *
+ * Displays the HTML element names for content blocks.
+ */
+export default class ShowBlocksCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        // It does not affect data so should be enabled in read-only mode.
+        this.affectsData = false;
+        this.value = false;
+    }
+    /**
+     * Toggles the visibility of content blocks.
+     */
+    execute() {
+        const CLASS_NAME = 'ck-show-blocks';
+        const view = this.editor.editing.view;
+        view.change(writer => {
+            // Multiroot support.
+            for (const root of view.document.roots) {
+                if (!root.hasClass(CLASS_NAME)) {
+                    writer.addClass(CLASS_NAME, root);
+                    this.value = true;
+                }
+                else {
+                    writer.removeClass(CLASS_NAME, root);
+                    this.value = false;
+                }
+            }
+        });
+    }
+}

package/src/showblocksediting.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblocksediting
+ */
+import { Plugin } from 'ckeditor5/src/core';
+/**
+ * The show blocks editing plugin.
+ */
+export default class ShowBlocksEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ShowBlocksEditing";
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/showblocksediting.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblocksediting
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ShowBlocksCommand from './showblockscommand';
+/**
+ * The show blocks editing plugin.
+ */
+export default class ShowBlocksEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ShowBlocksEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const { editor } = this;
+        editor.commands.add('showBlocks', new ShowBlocksCommand(editor));
+    }
+}

package/src/showblocksui.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblocksui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import '../theme/showblocks.css';
+/**
+ * The UI plugin of the show blocks feature.
+ *
+ * It registers the `'showBlocks'` UI button in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
+ * that toggles the visibility of the HTML element names of content blocks.
+ */
+export default class ShowBlocksUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ShowBlocksUI";
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/showblocksui.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module show-blocks/showblocksui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+import showBlocksIcon from '../theme/icons/show-blocks.svg';
+import '../theme/showblocks.css';
+/**
+ * The UI plugin of the show blocks feature.
+ *
+ * It registers the `'showBlocks'` UI button in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
+ * that toggles the visibility of the HTML element names of content blocks.
+ */
+export default class ShowBlocksUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ShowBlocksUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        editor.ui.componentFactory.add('showBlocks', locale => {
+            const command = editor.commands.get('showBlocks');
+            const view = new ButtonView(locale);
+            const t = locale.t;
+            view.set({
+                label: t('Show blocks'),
+                icon: showBlocksIcon,
+                tooltip: true
+            });
+            view.bind('isOn').to(command, 'value', command, 'isEnabled', (value, isEnabled) => value && isEnabled);
+            view.bind('isEnabled').to(command);
+            // Execute the command.
+            this.listenTo(view, 'execute', () => {
+                editor.execute('showBlocks');
+                editor.editing.view.focus();
+            });
+            return view;
+        });
+    }
+}

package/theme/icons/show-blocks.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.395 9.196 2.545-.007V6.498a.598.598 0 0 1 .598-.598h.299a.598.598 0 0 1 .598.598v6.877a.598.598 0 0 1-.598.598h-.299a.598.598 0 0 1-.598-.598v-2.691l-2.545.007v2.691a.598.598 0 0 1-.598.598h-.299a.598.598 0 0 1-.598-.598V6.505a.598.598 0 0 1 .598-.598h.299a.598.598 0 0 1 .598.598v2.691Z"/><path d="M15.094 13.417V6.462a.562.562 0 0 0-.562-.562h-.782a1 1 0 0 0-.39.08l-1.017.43a.562.562 0 0 0-.343.517v.197c0 .4.406.67.775.519l.819-.337v6.111c0 .31.251.562.561.562h.377c.31 0 .562-.251.562-.562Z"/><path d="M0 15.417v1.5h1.5v-1.5H0Z"/><path d="M18.5 15.417v1.5H20v-1.5h-1.5Z"/><path d="M18.5 12.333v1.5H20v-1.5h-1.5Z"/><path d="M18.5 9.25v1.5H20v-1.5h-1.5Z"/><path d="M18.5 6.167v1.5H20v-1.5h-1.5Z"/><path d="M0 18.5v.5a1 1 0 0 0 1 1h.5v-1.5H0Z"/><path d="M3.083 18.5V20h1.5v-1.5h-1.5Z"/><path d="M6.167 18.5V20h1.5v-1.5h-1.5Z"/><path d="M9.25 18.5V20h1.5v-1.5h-1.5Z"/><path d="M12.333 18.5V20h1.5v-1.5h-1.5Z"/><path d="M15.417 18.5V20h1.5v-1.5h-1.5Z"/><path d="M18.5 18.5V20h.5a1 1 0 0 0 1-1v-.5h-1.5Z"/><path clip-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v3.583h-1.5V1.5h-17v12.333H0V1Z"/></svg>

package/theme/showblocks.css

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+:root {
+	--ck-show-blocks-border-color: hsl(0, 0%, 46%);
+}
+
+@define-mixin block-name-background $text {
+	&:not(.ck-widget_selected):not(.ck-widget:hover) {
+		outline: 1px dashed var(--ck-show-blocks-border-color);
+	}
+
+	/* Some props are duplicated for both 'ltr' and 'rtl' directions for their higher specificity.
+	See https://github.com/ckeditor/ckeditor5/issues/14435 for details. */
+	@mixin ck-dir ltr {
+		background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px);' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>$(text)</text></svg>");
+		background-position: 1px 1px;
+		background-repeat: no-repeat;
+		padding-top: 15px;
+	}
+
+	@mixin ck-dir rtl {
+		background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0);' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>$(text)</text></svg>");
+		background-position: calc(100% - 1px) 1px;
+		background-repeat: no-repeat;
+		padding-top: 15px;
+	}
+}
+
+.ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) {
+	& address {
+		@mixin block-name-background ADDRESS;
+	}
+
+	& aside {
+		@mixin block-name-background ASIDE;
+	}
+
+	& blockquote {
+		@mixin block-name-background BLOCKQUOTE;
+	}
+
+	& details {
+		@mixin block-name-background DETAILS;
+	}
+
+	& div:not(.ck-widget, .ck-widget *) {
+		@mixin block-name-background DIV;
+	}
+
+	& footer {
+		@mixin block-name-background FOOTER;
+	}
+
+	& h1 {
+		@mixin block-name-background H1;
+	}
+
+	& h2 {
+		@mixin block-name-background H2;
+	}
+
+	& h3 {
+		@mixin block-name-background H3;
+	}
+
+	& h4 {
+		@mixin block-name-background H4;
+	}
+
+	& h5 {
+		@mixin block-name-background H5;
+	}
+
+	& h6 {
+		@mixin block-name-background H6;
+	}
+
+	& header {
+		@mixin block-name-background HEADER;
+	}
+
+	& main {
+		@mixin block-name-background MAIN;
+	}
+
+	& nav {
+		@mixin block-name-background NAV;
+	}
+
+	& pre {
+		@mixin block-name-background PRE;
+	}
+
+	& ol {
+		@mixin block-name-background OL;
+	}
+
+	& ul {
+		@mixin block-name-background UL;
+	}
+
+	& p {
+		@mixin block-name-background P;
+	}
+
+	& section {
+		@mixin block-name-background SECTION;
+	}
+
+	& :where(figure.image, figure.table) figcaption {
+		@mixin block-name-background FIGCAPTION;
+	}
+}