@ckeditor/ckeditor5-bookmark 0.0.1 → 44.0.0-alpha.0

package/src/updatebookmarkcommand.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @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 bookmark/updatebookmarkcommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The update bookmark command.
+ *
+ * The command is registered by {@link module:bookmark/bookmarkediting~BookmarkEditing} as `'updateBookmark'`.
+ *
+ * To update the `bookmarkId` of current selected bookmark element, execute the command passing the bookmark id as a parameter:
+ *
+ * ```ts
+ * editor.execute( 'updateBookmark', { bookmarkId: 'newId' } );
+ * ```
+ */
+export default class UpdateBookmarkCommand extends Command {
+    /**
+     * The value of the `'bookmarkId'` attribute.
+     *
+     * @observable
+     * @readonly
+     */
+    value: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Command options.
+     * @param options.bookmarkId The new value of the `bookmarkId` attribute to set.
+     */
+    execute(options: {
+        bookmarkId: string;
+    }): void;
+}

package/src/updatebookmarkcommand.js

@@ -0,0 +1,75 @@
+/**
+ * @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 bookmark/updatebookmarkcommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+import { logWarning } from 'ckeditor5/src/utils.js';
+import { isBookmarkIdValid } from './utils.js';
+/**
+ * The update bookmark command.
+ *
+ * The command is registered by {@link module:bookmark/bookmarkediting~BookmarkEditing} as `'updateBookmark'`.
+ *
+ * To update the `bookmarkId` of current selected bookmark element, execute the command passing the bookmark id as a parameter:
+ *
+ * ```ts
+ * editor.execute( 'updateBookmark', { bookmarkId: 'newId' } );
+ * ```
+ */
+export default class UpdateBookmarkCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const selectedBookmark = getSelectedBookmark(selection);
+        this.isEnabled = !!selectedBookmark;
+        this.value = selectedBookmark ? selectedBookmark.getAttribute('bookmarkId') : undefined;
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Command options.
+     * @param options.bookmarkId The new value of the `bookmarkId` attribute to set.
+     */
+    execute(options) {
+        if (!options) {
+            return;
+        }
+        const { bookmarkId } = options;
+        if (!isBookmarkIdValid(bookmarkId)) {
+            /**
+             * Update bookmark command can be executed only with a valid name.
+             *
+             * A valid bookmark name must be a non-empty string and must not contain any spaces.
+             *
+             * @error update-bookmark-command-executed-with-invalid-name
+             */
+            logWarning('update-bookmark-command-executed-with-invalid-name');
+            return;
+        }
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const selectedBookmark = getSelectedBookmark(selection);
+        if (selectedBookmark) {
+            model.change(writer => {
+                writer.setAttribute('bookmarkId', bookmarkId, selectedBookmark);
+            });
+        }
+    }
+}
+/**
+ * Returns the selected `bookmark` element in the model, if any.
+ */
+function getSelectedBookmark(selection) {
+    const element = selection.getSelectedElement();
+    if (!!element && element.is('element', 'bookmark')) {
+        return element;
+    }
+    return null;
+}

package/src/utils.d.ts

@@ -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 bookmark/utils
+ */
+/**
+ * Returns `true` if the bookmark id is valid; otherwise, returns `false`.
+ */
+export declare function isBookmarkIdValid(id: string): boolean;

package/src/utils.js

@@ -0,0 +1,19 @@
+/**
+ * @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 bookmark/utils
+ */
+/**
+ * Returns `true` if the bookmark id is valid; otherwise, returns `false`.
+ */
+export function isBookmarkIdValid(id) {
+    if (!id || typeof id !== 'string') {
+        return false;
+    }
+    if (/\s/.test(id)) {
+        return false;
+    }
+    return true;
+}

package/theme/bookmark.css

@@ -0,0 +1,50 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-bookmark-icon-hover-fill-color: var(--ck-color-widget-hover-border);
+	--ck-bookmark-icon-selected-fill-color: var(--ck-color-focus-border);
+	--ck-bookmark-icon-animation-duration: var(--ck-widget-handler-animation-duration);
+	--ck-bookmark-icon-animation-curve: var(--ck-widget-handler-animation-curve);
+}
+
+.ck-bookmark {
+	&.ck-widget {
+		outline: none;
+
+		& .ck-bookmark__icon .ck-icon__fill {
+			transition: fill var(--ck-bookmark-icon-animation-duration) var(--ck-bookmark-icon-animation-curve);
+		}
+
+		&:hover {
+			& .ck-bookmark__icon .ck-icon__fill {
+				fill: var(--ck-bookmark-icon-hover-fill-color);
+			}
+		}
+
+		&.ck-widget_selected {
+			.ck-bookmark__icon .ck-icon__fill {
+				fill: var(--ck-bookmark-icon-selected-fill-color);
+			}
+		}
+
+		&.ck-widget_selected,
+		&.ck-widget_selected:hover {
+			outline: none;
+		}
+
+		& .ck-bookmark__icon {
+			position: relative;
+			/* To make it align with text baseline. */
+			top: -0.1em;
+
+			& .ck-icon {
+				height: 1.2em;
+				width: auto;
+				vertical-align: middle;
+			}
+		}
+	}
+}

package/theme/bookmarkactions.css

@@ -0,0 +1,44 @@
+/*
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+
+.ck.ck-bookmark-actions {
+	display: flex;
+	align-items: center;
+
+	& .ck-bookmark-actions__preview {
+		max-width: var(--ck-input-width);
+		min-width: 3em;
+		font-weight: normal;
+		text-overflow: ellipsis;
+		text-align: center;
+		overflow: hidden;
+
+		@mixin ck-unselectable;
+		cursor: default;
+	}
+
+	@mixin ck-media-phone {
+		display: flex;
+		flex-wrap: wrap;
+
+		& .ck-bookmark-actions__preview {
+			flex-basis: 100%;
+			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
+			min-width: auto;
+		}
+	}
+
+	&.ck-responsive-form {
+		& .ck-button {
+			@mixin ck-media-phone {
+				flex-basis: 50%;
+				margin-top: var(--ck-spacing-standard);
+			}
+		}
+	}
+}

package/theme/bookmarkform.css

@@ -0,0 +1,42 @@
+/*
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+.ck.ck-bookmark-view {
+	&:focus {
+		outline: none;
+	}
+}
+
+.ck.ck-bookmark-form {
+	display: flex;
+	align-items: flex-start;
+
+	@mixin ck-media-phone {
+		flex-wrap: wrap;
+
+		& .ck-button,
+		& .ck-labeled-field-view {
+			flex-basis: 100%;
+		}
+
+		& .ck-button {
+			justify-content: center;
+		}
+	}
+
+	&.ck-responsive-form {
+		& > .ck-button {
+			@mixin ck-media-phone {
+				&:nth-last-child(1) {
+					margin: var(--ck-spacing-large);
+					padding: 0 var(--ck-spacing-standard);
+					border-radius: var(--ck-border-radius);
+				}
+			}
+		}
+	}
+}