@ckeditor/ckeditor5-block-quote 0.0.0-internal-20241017.0

package/src/blockquoteediting.js

@@ -0,0 +1,124 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module block-quote/blockquoteediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Enter } from 'ckeditor5/src/enter.js';
+import { Delete } from 'ckeditor5/src/typing.js';
+import BlockQuoteCommand from './blockquotecommand.js';
+/**
+ * The block quote editing.
+ *
+ * Introduces the `'blockQuote'` command and the `'blockQuote'` model element.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class BlockQuoteEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'BlockQuoteEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [Enter, Delete];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const schema = editor.model.schema;
+        editor.commands.add('blockQuote', new BlockQuoteCommand(editor));
+        schema.register('blockQuote', {
+            inheritAllFrom: '$container'
+        });
+        editor.conversion.elementToElement({ model: 'blockQuote', view: 'blockquote' });
+        // Postfixer which cleans incorrect model states connected with block quotes.
+        editor.model.document.registerPostFixer(writer => {
+            const changes = editor.model.document.differ.getChanges();
+            for (const entry of changes) {
+                if (entry.type == 'insert') {
+                    const element = entry.position.nodeAfter;
+                    if (!element) {
+                        // We are inside a text node.
+                        continue;
+                    }
+                    if (element.is('element', 'blockQuote') && element.isEmpty) {
+                        // Added an empty blockQuote - remove it.
+                        writer.remove(element);
+                        return true;
+                    }
+                    else if (element.is('element', 'blockQuote') && !schema.checkChild(entry.position, element)) {
+                        // Added a blockQuote in incorrect place. Unwrap it so the content inside is not lost.
+                        writer.unwrap(element);
+                        return true;
+                    }
+                    else if (element.is('element')) {
+                        // Just added an element. Check that all children meet the scheme rules.
+                        const range = writer.createRangeIn(element);
+                        for (const child of range.getItems()) {
+                            if (child.is('element', 'blockQuote') &&
+                                !schema.checkChild(writer.createPositionBefore(child), child)) {
+                                writer.unwrap(child);
+                                return true;
+                            }
+                        }
+                    }
+                }
+                else if (entry.type == 'remove') {
+                    const parent = entry.position.parent;
+                    if (parent.is('element', 'blockQuote') && parent.isEmpty) {
+                        // Something got removed and now blockQuote is empty. Remove the blockQuote as well.
+                        writer.remove(parent);
+                        return true;
+                    }
+                }
+            }
+            return false;
+        });
+        const viewDocument = this.editor.editing.view.document;
+        const selection = editor.model.document.selection;
+        const blockQuoteCommand = editor.commands.get('blockQuote');
+        // Overwrite default Enter key behavior.
+        // If Enter key is pressed with selection collapsed in empty block inside a quote, break the quote.
+        this.listenTo(viewDocument, 'enter', (evt, data) => {
+            if (!selection.isCollapsed || !blockQuoteCommand.value) {
+                return;
+            }
+            const positionParent = selection.getLastPosition().parent;
+            if (positionParent.isEmpty) {
+                editor.execute('blockQuote');
+                editor.editing.view.scrollToTheSelection();
+                data.preventDefault();
+                evt.stop();
+            }
+        }, { context: 'blockquote' });
+        // Overwrite default Backspace key behavior.
+        // If Backspace key is pressed with selection collapsed in first empty block inside a quote, break the quote.
+        this.listenTo(viewDocument, 'delete', (evt, data) => {
+            if (data.direction != 'backward' || !selection.isCollapsed || !blockQuoteCommand.value) {
+                return;
+            }
+            const positionParent = selection.getLastPosition().parent;
+            if (positionParent.isEmpty && !positionParent.previousSibling) {
+                editor.execute('blockQuote');
+                editor.editing.view.scrollToTheSelection();
+                data.preventDefault();
+                evt.stop();
+            }
+        }, { context: 'blockquote' });
+    }
+}

package/src/blockquoteui.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module block-quote/blockquoteui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import '../theme/blockquote.css';
+/**
+ * The block quote UI plugin.
+ *
+ * It introduces the `'blockQuote'` button.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class BlockQuoteUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "BlockQuoteUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates a button for block quote command to use either in toolbar or in menu bar.
+     */
+    private _createButton;
+}

package/src/blockquoteui.js

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module block-quote/blockquoteui
+ */
+import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import '../theme/blockquote.css';
+/**
+ * The block quote UI plugin.
+ *
+ * It introduces the `'blockQuote'` button.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class BlockQuoteUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'BlockQuoteUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        editor.ui.componentFactory.add('blockQuote', () => {
+            const buttonView = this._createButton(ButtonView);
+            buttonView.set({
+                tooltip: true
+            });
+            return buttonView;
+        });
+        editor.ui.componentFactory.add('menuBar:blockQuote', () => {
+            const buttonView = this._createButton(MenuBarMenuListItemButtonView);
+            buttonView.set({
+                role: 'menuitemcheckbox'
+            });
+            return buttonView;
+        });
+    }
+    /**
+     * Creates a button for block quote command to use either in toolbar or in menu bar.
+     */
+    _createButton(ButtonClass) {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const command = editor.commands.get('blockQuote');
+        const view = new ButtonClass(editor.locale);
+        const t = locale.t;
+        view.set({
+            label: t('Block quote'),
+            icon: icons.quote,
+            isToggleable: true
+        });
+        view.bind('isEnabled').to(command, 'isEnabled');
+        view.bind('isOn').to(command, 'value');
+        // Execute the command.
+        this.listenTo(view, 'execute', () => {
+            editor.execute('blockQuote');
+            editor.editing.view.focus();
+        });
+        return view;
+    }
+}

package/src/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module block-quote
+ */
+export { default as BlockQuote } from './blockquote.js';
+export { default as BlockQuoteEditing } from './blockquoteediting.js';
+export { default as BlockQuoteUI } from './blockquoteui.js';
+export type { default as BlockQuoteCommand } from './blockquotecommand.js';
+import './augmentation.js';

package/src/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module block-quote
+ */
+export { default as BlockQuote } from './blockquote.js';
+export { default as BlockQuoteEditing } from './blockquoteediting.js';
+export { default as BlockQuoteUI } from './blockquoteui.js';
+import './augmentation.js';

package/theme/blockquote.css

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-content blockquote {
+	/* See #12 */
+	overflow: hidden;
+
+	/* https://github.com/ckeditor/ckeditor5-block-quote/issues/15 */
+	padding-right: 1.5em;
+	padding-left: 1.5em;
+
+	margin-left: 0;
+	margin-right: 0;
+	font-style: italic;
+	border-left: solid 5px hsl(0, 0%, 80%);
+}
+
+.ck-content[dir="rtl"] blockquote {
+	border-left: 0;
+	border-right: solid 5px hsl(0, 0%, 80%);
+}