From 50f581305343bdbc768e6037da2380123ffde586 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 14:49:16 +0200 Subject: [PATCH 01/18] [MT-4618] Move WebBookmarkMenu to WebBookmarkElement --- .../editor-v4-web-bookmark/WebBookmarkExtension.tsx | 9 +-------- .../components/WebBookmarkElement/WebBookmarkElement.tsx | 4 ++++ .../{ => WebBookmarkElement}/WebBookmarkMenu.tsx | 0 .../modules/editor-v4-web-bookmark/components/index.ts | 1 - 4 files changed, 5 insertions(+), 9 deletions(-) rename packages/slate-editor/src/modules/editor-v4-web-bookmark/components/{ => WebBookmarkElement}/WebBookmarkMenu.tsx (100%) diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx index 95e75a2bd..9c5472ec4 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx @@ -4,14 +4,13 @@ import { BOOKMARK_NODE_TYPE, isBookmarkNode } from '@prezly/slate-types'; import React from 'react'; import type { RenderElementProps } from 'slate-react'; -import { WebBookmarkElement, WebBookmarkMenu } from './components'; +import { WebBookmarkElement } from './components'; import { WEB_BOOKMARK_EXTENSION_ID } from './constants'; import { normalizeRedundantWebBookmarkAttributes, parseSerializedElement } from './lib'; import type { WebBookmarkParameters } from './types'; export const WebBookmarkExtension = ({ availableWidth, - containerRef, }: WebBookmarkParameters): Extension => ({ deserialize: { element: { @@ -24,12 +23,6 @@ export const WebBookmarkExtension = ({ if (isBookmarkNode(element)) { return ( <> - {attributes.ref.current && ( - - )} = ({ attributes, child {...attributes} element={element} overlay="always" + renderMenu={() => ( + + )} slateInternalsChildren={children} void={true} > diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx similarity index 100% rename from packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkMenu.tsx rename to packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/index.ts b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/index.ts index 4fc161fa7..bf4758da6 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/index.ts +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/index.ts @@ -1,3 +1,2 @@ export { FloatingWebBookmarkInput } from './FloatingWebBookmarkInput'; export { WebBookmarkElement } from './WebBookmarkElement'; -export { WebBookmarkMenu } from './WebBookmarkMenu'; From 4f2a19128f6f623473cae2fc2dabd004edb74111 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:04:22 +0200 Subject: [PATCH 02/18] [MT-4618] Change Toolbox.Panel to accept `style` and `className` from above And also forward reference to its DOM element (needed for Popper positioning) --- .../src/components/Toolbox/Panel.tsx | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/slate-editor/src/components/Toolbox/Panel.tsx b/packages/slate-editor/src/components/Toolbox/Panel.tsx index 09853a0a3..82a947206 100644 --- a/packages/slate-editor/src/components/Toolbox/Panel.tsx +++ b/packages/slate-editor/src/components/Toolbox/Panel.tsx @@ -1,7 +1,24 @@ -import * as React from 'react'; +import classNames from 'classnames'; +import type { CSSProperties, ReactNode } from 'react'; +import React, { forwardRef } from 'react'; import styles from './Toolbox.module.scss'; -export function Panel(props: React.PropsWithChildren>) { - return {props.children}; +interface Props { + children: ReactNode; + className?: string; + style?: CSSProperties; } + +export const Panel = forwardRef(function ( + { children, className, style }, + ref, +) { + return ( +
+ {children} +
+ ); +}); + +Panel.displayName = 'Panel'; From 4f1f2108931487679eb5ad6748fcc4143a1bfdb9 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:05:19 +0200 Subject: [PATCH 03/18] [MT-4618] Lift border-radius and background onto Toolbox.Panel styling --- .../src/components/Toolbox/Toolbox.module.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/slate-editor/src/components/Toolbox/Toolbox.module.scss b/packages/slate-editor/src/components/Toolbox/Toolbox.module.scss index 8165d36f3..0a2ec1de4 100644 --- a/packages/slate-editor/src/components/Toolbox/Toolbox.module.scss +++ b/packages/slate-editor/src/components/Toolbox/Toolbox.module.scss @@ -10,20 +10,18 @@ display: flex; justify-content: space-between; overflow: hidden; - background: rgba($indigo-900, 0.96); - border-top-left-radius: $spacing-1-5; - border-top-right-radius: $spacing-1-5; padding: $spacing-2; color: $white; } .panel { backdrop-filter: blur(6px); + background: rgba($indigo-900, 0.96); + border-radius: $border-radius-base * 2; } .section { border-top: 1px solid rgba($white, 0.12); - background: rgba($indigo-900, 0.96); padding: $spacing-2; &--no-padding { @@ -39,8 +37,5 @@ display: flex; overflow: hidden; color: $white; - background: rgba($indigo-900, 0.96); border-top: 1px solid rgba($white, 0.12); - border-bottom-left-radius: $spacing-1-5; - border-bottom-right-radius: $spacing-1-5; } From 2ab366f8205dbe6a4c7647d487ab4f212a7466aa Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:05:43 +0200 Subject: [PATCH 04/18] [MT-4618] Use Toolbox markup for WebBookmarkElement menu --- .../EditorBlock/EditorBlock.module.scss | 8 +- .../src/components/EditorBlock/Menu.tsx | 6 +- .../WebBookmarkElement/WebBookmarkElement.tsx | 4 +- .../WebBookmarkMenu.module.scss | 7 ++ .../WebBookmarkElement/WebBookmarkMenu.tsx | 83 +++++++++++++++---- 5 files changed, 81 insertions(+), 27 deletions(-) create mode 100644 packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss diff --git a/packages/slate-editor/src/components/EditorBlock/EditorBlock.module.scss b/packages/slate-editor/src/components/EditorBlock/EditorBlock.module.scss index 7403057ed..0208f18bd 100644 --- a/packages/slate-editor/src/components/EditorBlock/EditorBlock.module.scss +++ b/packages/slate-editor/src/components/EditorBlock/EditorBlock.module.scss @@ -29,14 +29,8 @@ } .menu { - width: 280px; // FIXME - min-height: 320px; // FIXME - + width: 280px; position: absolute; - border-radius: 12px; - padding: 16px; - background-color: rgba($indigo-900, 0.96); - color: white; backdrop-filter: blur(6px); } diff --git a/packages/slate-editor/src/components/EditorBlock/Menu.tsx b/packages/slate-editor/src/components/EditorBlock/Menu.tsx index e5e5fa670..a7eb31cad 100644 --- a/packages/slate-editor/src/components/EditorBlock/Menu.tsx +++ b/packages/slate-editor/src/components/EditorBlock/Menu.tsx @@ -6,6 +6,8 @@ import React, { Component } from 'react'; import type { Modifier } from 'react-popper'; import { Popper } from 'react-popper'; +import { Toolbox } from '#components'; + import styles from './EditorBlock.module.scss'; interface Props { @@ -94,7 +96,7 @@ export class Menu extends Component { placement="right-start" > {({ ref, style, arrowProps, placement }) => ( -
+
= 0, @@ -105,7 +107,7 @@ export class Menu extends Component { {...arrowProps} /> {children} -
+ )} ); diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx index 811d8e9ab..313efb81d 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx @@ -93,9 +93,7 @@ export const WebBookmarkElement: FunctionComponent = ({ attributes, child {...attributes} element={element} overlay="always" - renderMenu={() => ( - - )} + renderMenu={() => } slateInternalsChildren={children} void={true} > diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss new file mode 100644 index 000000000..558b8bb06 --- /dev/null +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss @@ -0,0 +1,7 @@ +.optionIcon { + color: white; // FIXME + + &.active { + color: white; // FIXME + } +} diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index 633005597..f3353af9e 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -1,19 +1,46 @@ -import type { FunctionComponent, RefObject } from 'react'; +import type { BookmarkNode } from '@prezly/slate-types'; +import { BookmarkCardLayout } from '@prezly/slate-types'; +import classNames from 'classnames'; +import type { FunctionComponent } from 'react'; import React from 'react'; import { useSelected, useSlate } from 'slate-react'; -import { Menu } from '#components'; -import { Delete } from '#icons'; +import type { OptionsGroupOption } from '#components'; +import { Button, Link, OptionsGroup, Toggle, Toolbox, VStack } from '#components'; +import { Delete, ExternalLink, ItemsLayoutHorizontal, ItemsLayoutVertical } from '#icons'; -import { EventsEditor } from '../../editor-v4-events'; -import { removeWebBookmark } from '../transforms'; +import { EventsEditor } from '#modules/editor-v4-events'; + +import { removeWebBookmark } from '../../transforms'; + +import styles from './WebBookmarkMenu.module.scss'; interface Props { - containerRef: RefObject; - element: HTMLElement; + element: BookmarkNode; } -export const WebBookmarkMenu: FunctionComponent = ({ containerRef, element }) => { +const LAYOUT_OPTIONS: OptionsGroupOption[] = [ + { + value: BookmarkCardLayout.VERTICAL, + Icon: ({ isActive }) => ( + + ), + label: 'Vertical', + }, + { + value: BookmarkCardLayout.HORIZONTAL, + Icon: ({ isActive }) => ( + + ), + label: 'Horizontal', + }, +]; + +export const WebBookmarkMenu: FunctionComponent = ({ element }) => { const editor = useSlate(); const isSelected = useSelected(); @@ -32,12 +59,38 @@ export const WebBookmarkMenu: FunctionComponent = ({ containerRef, elemen } return ( - - - - - - - + <> + Web bookmark settings + + + + View + + + + + Show preview image + + + + + + name="card-layout" + type="radio" + options={LAYOUT_OPTIONS} + selected={element.layout} + onChange={() => null} // FIXME + columns={3} + /> + Open in new tab + + + + + + + ); }; From 66988700c33c47765efefd0197f095d346afa93e Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:16:30 +0200 Subject: [PATCH 05/18] [MT-4618] Implement open/close menu logic --- .../src/components/EditorBlock/EditorBlock.tsx | 13 ++++++++----- .../src/components/EditorBlock/Menu.tsx | 8 +++++++- .../src/components/EditorBlock/Overlay.tsx | 4 +++- .../WebBookmarkElement/WebBookmarkElement.tsx | 2 +- .../WebBookmarkElement/WebBookmarkMenu.tsx | 7 +++++-- 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx b/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx index b72b949aa..91326a8e8 100644 --- a/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx +++ b/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx @@ -1,7 +1,7 @@ import type { ElementNode } from '@prezly/slate-types'; import classNames from 'classnames'; import type { ReactNode } from 'react'; -import React, { forwardRef, useState } from 'react'; +import React, { forwardRef, useCallback, useState } from 'react'; import { useSelected } from 'slate-react'; import type { RenderElementProps } from 'slate-react'; @@ -17,7 +17,7 @@ type SlateInternalAttributes = RenderElementProps['attributes']; interface Props extends Omit, SlateInternalAttributes { className?: string; element: ElementNode; - renderMenu?: () => ReactNode; + renderMenu?: (props: { onClose: () => void }) => ReactNode; overlay?: OverlayMode; /** * Children nodes provided by Slate, required for Slate internals. @@ -41,7 +41,10 @@ export const EditorBlock = forwardRef(function ( ) { const editorElement = useSlateDom(); const isSelected = useSelected(); + const [menuOpen, setMenuOpen] = useState(true); const [container, setContainer] = useState(null); + const openMenu = useCallback(() => setMenuOpen(true), [setMenuOpen]); + const closeMenu = useCallback(() => setMenuOpen(false), [setMenuOpen]); return (
(function ( >
{isSelected && renderMenu && container && editorElement && ( - - {renderMenu()} + + {renderMenu({ onClose: closeMenu })} )} - + {children}
diff --git a/packages/slate-editor/src/components/EditorBlock/Menu.tsx b/packages/slate-editor/src/components/EditorBlock/Menu.tsx index a7eb31cad..94167548e 100644 --- a/packages/slate-editor/src/components/EditorBlock/Menu.tsx +++ b/packages/slate-editor/src/components/EditorBlock/Menu.tsx @@ -13,6 +13,7 @@ import styles from './EditorBlock.module.scss'; interface Props { children: ReactNode; editorElement: HTMLElement; + open: boolean; reference: HTMLElement; } @@ -88,7 +89,12 @@ export class Menu extends Component { }; render() { - const { children, editorElement } = this.props; + const { children, editorElement, open } = this.props; + + if (!open) { + return null; + } + return ( void; } -export function Overlay({ selected, mode }: Props) { +export function Overlay({ mode, onClick, selected }: Props) { if (mode === false) { return null; } @@ -19,6 +20,7 @@ export function Overlay({ selected, mode }: Props) { className={classNames(styles.overlay, { [styles.hidden]: selected && mode === 'autohide', })} + onClick={onClick} /> ); } diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx index 313efb81d..6e8a03c41 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx @@ -93,7 +93,7 @@ export const WebBookmarkElement: FunctionComponent = ({ attributes, child {...attributes} element={element} overlay="always" - renderMenu={() => } + renderMenu={(props) => } slateInternalsChildren={children} void={true} > diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index f3353af9e..588af9b40 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -17,6 +17,7 @@ import styles from './WebBookmarkMenu.module.scss'; interface Props { element: BookmarkNode; + onClose: () => void; } const LAYOUT_OPTIONS: OptionsGroupOption[] = [ @@ -40,7 +41,7 @@ const LAYOUT_OPTIONS: OptionsGroupOption[] = [ }, ]; -export const WebBookmarkMenu: FunctionComponent = ({ element }) => { +export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) => { const editor = useSlate(); const isSelected = useSelected(); @@ -60,7 +61,9 @@ export const WebBookmarkMenu: FunctionComponent = ({ element }) => { return ( <> - Web bookmark settings + + Web bookmark settings + From dc8011b31bf56f5eb936fa8a29cf060ae61d6dd4 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:42:10 +0200 Subject: [PATCH 06/18] [MT-4618] Style layout options icons --- packages/slate-editor/src/icons/Items-Layout-Horizontal.svg | 4 ++-- packages/slate-editor/src/icons/Items-Layout-Vertical.svg | 4 ++-- .../WebBookmarkElement/WebBookmarkMenu.module.scss | 6 ++++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/slate-editor/src/icons/Items-Layout-Horizontal.svg b/packages/slate-editor/src/icons/Items-Layout-Horizontal.svg index e7e3b867f..e7c71df44 100644 --- a/packages/slate-editor/src/icons/Items-Layout-Horizontal.svg +++ b/packages/slate-editor/src/icons/Items-Layout-Horizontal.svg @@ -1,5 +1,5 @@ - + - \ No newline at end of file + diff --git a/packages/slate-editor/src/icons/Items-Layout-Vertical.svg b/packages/slate-editor/src/icons/Items-Layout-Vertical.svg index adbd36110..6960227e0 100644 --- a/packages/slate-editor/src/icons/Items-Layout-Vertical.svg +++ b/packages/slate-editor/src/icons/Items-Layout-Vertical.svg @@ -1,5 +1,5 @@ - + - \ No newline at end of file + diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss index 558b8bb06..7d2025291 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.module.scss @@ -1,7 +1,9 @@ +@import "styles/variables"; + .optionIcon { - color: white; // FIXME + color: $white; &.active { - color: white; // FIXME + color: $yellow-300; } } From 3b1a829383395eeaa724f5044a91337db67babeb Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:44:15 +0200 Subject: [PATCH 07/18] [MT-4618] Link web bookmark URL to "View" button --- .../components/WebBookmarkElement/WebBookmarkMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index 588af9b40..c36ff0b3d 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -66,7 +66,7 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - + View From 16f54e8a4ad3f630868b9e780db70a5275bbd888 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:49:58 +0200 Subject: [PATCH 08/18] [MT-4618] Add input `name` to required `Toggle` props --- packages/slate-editor/src/components/Toggle/Toggle.tsx | 2 ++ .../slate-editor/src/components/Toolbox/Toolbox.stories.tsx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/slate-editor/src/components/Toggle/Toggle.tsx b/packages/slate-editor/src/components/Toggle/Toggle.tsx index 32bf82854..e0a10ecf9 100644 --- a/packages/slate-editor/src/components/Toggle/Toggle.tsx +++ b/packages/slate-editor/src/components/Toggle/Toggle.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import styles from './Toggle.module.scss'; interface ToggleProps { + name: string; value?: boolean; onChange?: (value: boolean) => void; } @@ -13,6 +14,7 @@ export function Toggle(props: React.PropsWithChildren) { props.onChange?.(e.target.checked)} className={styles.input} /> diff --git a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx index e926e7ebc..977159f12 100644 --- a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx +++ b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx @@ -39,20 +39,20 @@ export function Base() { - Show preview image + Show preview image - Open in new tab + Open in new tab From 810aa39644c76aa24e185d30931e6f559ef3d3bc Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 16:53:10 +0200 Subject: [PATCH 09/18] [MT-4618] Wire Web Bookmark settings panel inputs to data --- .../WebBookmarkElement/WebBookmarkMenu.tsx | 26 ++++++++++++++----- .../transforms/index.ts | 1 + .../transforms/updateWebBookmark.ts | 11 ++++++++ 3 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/updateWebBookmark.ts diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index c36ff0b3d..4acccc12c 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -11,7 +11,7 @@ import { Delete, ExternalLink, ItemsLayoutHorizontal, ItemsLayoutVertical } from import { EventsEditor } from '#modules/editor-v4-events'; -import { removeWebBookmark } from '../../transforms'; +import { removeWebBookmark, updateWebBookmark } from '../../transforms'; import styles from './WebBookmarkMenu.module.scss'; @@ -72,20 +72,32 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - Show preview image + updateWebBookmark(editor, { show_thumbnail })} + > + Show preview image + - name="card-layout" - type="radio" + columns={3} + name="layout" + onChange={(layout) => updateWebBookmark(editor, { layout })} options={LAYOUT_OPTIONS} selected={element.layout} - onChange={() => null} // FIXME - columns={3} + type="radio" /> - Open in new tab + updateWebBookmark(editor, { new_tab })} + > + Open in new tab + diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/index.ts b/packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/index.ts index edf88dcb9..256a4adbe 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/index.ts +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/index.ts @@ -1 +1,2 @@ +export { updateWebBookmark } from './updateWebBookmark'; export { removeWebBookmark } from './removeWebBookmark'; diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/updateWebBookmark.ts b/packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/updateWebBookmark.ts new file mode 100644 index 000000000..ad88a222e --- /dev/null +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/transforms/updateWebBookmark.ts @@ -0,0 +1,11 @@ +import type { BookmarkNode } from '@prezly/slate-types'; +import { isBookmarkNode } from '@prezly/slate-types'; +import type { Editor } from 'slate'; +import { Transforms } from 'slate'; + +export function updateWebBookmark( + editor: Editor, + properties: Partial>, +): void { + Transforms.setNodes(editor, properties, { match: isBookmarkNode }); +} From d8d5d5d2d02aab45006a674baa91d4249ccf754f Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Mon, 14 Feb 2022 17:00:48 +0200 Subject: [PATCH 10/18] [MT-4618] Lock bookmark layout settings when thumbnail is off or unavailable --- .../src/components/OptionsGroup/OptionsGroup.tsx | 1 + packages/slate-editor/src/components/Toggle/Toggle.tsx | 1 + .../components/WebBookmarkElement/WebBookmarkMenu.tsx | 7 ++++++- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/slate-editor/src/components/OptionsGroup/OptionsGroup.tsx b/packages/slate-editor/src/components/OptionsGroup/OptionsGroup.tsx index 896e0d29a..e76d91394 100644 --- a/packages/slate-editor/src/components/OptionsGroup/OptionsGroup.tsx +++ b/packages/slate-editor/src/components/OptionsGroup/OptionsGroup.tsx @@ -5,6 +5,7 @@ import { ChooseOption } from './Option'; import styles from './OptionsGroup.module.scss'; interface OptionsGroupCommon { + disabled?: boolean; name: string; options: OptionsGroupOption[]; columns?: number; diff --git a/packages/slate-editor/src/components/Toggle/Toggle.tsx b/packages/slate-editor/src/components/Toggle/Toggle.tsx index e0a10ecf9..f89720577 100644 --- a/packages/slate-editor/src/components/Toggle/Toggle.tsx +++ b/packages/slate-editor/src/components/Toggle/Toggle.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import styles from './Toggle.module.scss'; interface ToggleProps { + disabled?: boolean; name: string; value?: boolean; onChange?: (value: boolean) => void; diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index 4acccc12c..78772a8d1 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -59,6 +59,9 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) return null; } + const isLayoutChangeable = element.oembed.thumbnail_url && element.show_thumbnail; + const activeLayout = isLayoutChangeable ? element.layout : BookmarkCardLayout.VERTICAL; + return ( <> @@ -73,6 +76,7 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) updateWebBookmark(editor, { show_thumbnail })} @@ -85,10 +89,11 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) columns={3} + disabled={!isLayoutChangeable} name="layout" onChange={(layout) => updateWebBookmark(editor, { layout })} options={LAYOUT_OPTIONS} - selected={element.layout} + selected={activeLayout} type="radio" /> Date: Mon, 14 Feb 2022 19:18:27 +0200 Subject: [PATCH 11/18] [MT-4618] Drop unused WebBookmarkExtension props --- .../editor-v4-web-bookmark/WebBookmarkExtension.tsx | 11 ++--------- .../WebBookmarkElement/WebBookmarkElement.tsx | 1 - .../src/modules/editor-v4-web-bookmark/types.ts | 6 ------ .../src/modules/editor-v4/getEnabledExtensions.ts | 6 +----- 4 files changed, 3 insertions(+), 21 deletions(-) diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx index 9c5472ec4..e072424be 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/WebBookmarkExtension.tsx @@ -7,11 +7,8 @@ import type { RenderElementProps } from 'slate-react'; import { WebBookmarkElement } from './components'; import { WEB_BOOKMARK_EXTENSION_ID } from './constants'; import { normalizeRedundantWebBookmarkAttributes, parseSerializedElement } from './lib'; -import type { WebBookmarkParameters } from './types'; -export const WebBookmarkExtension = ({ - availableWidth, -}: WebBookmarkParameters): Extension => ({ +export const WebBookmarkExtension = (): Extension => ({ deserialize: { element: { [BOOKMARK_NODE_TYPE]: createDeserializeElement(parseSerializedElement), @@ -23,11 +20,7 @@ export const WebBookmarkExtension = ({ if (isBookmarkNode(element)) { return ( <> - + {children} diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx index 6e8a03c41..e932212a5 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx @@ -15,7 +15,6 @@ import { WebBookmarkMenu } from './WebBookmarkMenu'; const HORIZONTAL_LAYOUT_MIN_WIDTH = 480; interface Props extends RenderElementProps { - availableWidth: number; element: BookmarkNode; } diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/types.ts b/packages/slate-editor/src/modules/editor-v4-web-bookmark/types.ts index 0951a9d09..fe1984917 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/types.ts +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/types.ts @@ -1,11 +1,5 @@ import type { OEmbedInfo } from '@prezly/sdk'; -import type { RefObject } from 'react'; export interface WebBookmarkExtensionParameters { fetchOembed: (url: OEmbedInfo['url']) => Promise; } - -export interface WebBookmarkParameters extends WebBookmarkExtensionParameters { - availableWidth: number; - containerRef: RefObject; -} diff --git a/packages/slate-editor/src/modules/editor-v4/getEnabledExtensions.ts b/packages/slate-editor/src/modules/editor-v4/getEnabledExtensions.ts index 87fa8b99f..3e0aff0af 100644 --- a/packages/slate-editor/src/modules/editor-v4/getEnabledExtensions.ts +++ b/packages/slate-editor/src/modules/editor-v4/getEnabledExtensions.ts @@ -131,11 +131,7 @@ export function* getEnabledExtensions({ } if (withWebBookmarks) { - yield WebBookmarkExtension({ - ...withWebBookmarks, - availableWidth, - containerRef, - }); + yield WebBookmarkExtension(); } if (withAutoformat) { From 39f3a234ea322e95a0e58b948d325854d784aec6 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Wed, 16 Feb 2022 12:22:44 +0200 Subject: [PATCH 12/18] [MT-4618] Minor refactoring to WebBookmark menu rendering callback --- .../components/WebBookmarkElement/WebBookmarkElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx index e932212a5..efaa5931d 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkElement.tsx @@ -92,7 +92,7 @@ export const WebBookmarkElement: FunctionComponent = ({ attributes, child {...attributes} element={element} overlay="always" - renderMenu={(props) => } + renderMenu={({ onClose }) => } slateInternalsChildren={children} void={true} > From a623044e2a97afe89fe61cfaf15c5b4c467b8a0b Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Wed, 16 Feb 2022 12:26:50 +0200 Subject: [PATCH 13/18] [MT-4618] Adapt WebBookmark menu to the latest Toolbox implementation --- .../WebBookmarkElement/WebBookmarkMenu.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index 78772a8d1..0391e4d73 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { useSelected, useSlate } from 'slate-react'; import type { OptionsGroupOption } from '#components'; -import { Button, Link, OptionsGroup, Toggle, Toolbox, VStack } from '#components'; +import { Button, OptionsGroup, Toggle, Toolbox, VStack } from '#components'; import { Delete, ExternalLink, ItemsLayoutHorizontal, ItemsLayoutVertical } from '#icons'; import { EventsEditor } from '#modules/editor-v4-events'; @@ -22,22 +22,22 @@ interface Props { const LAYOUT_OPTIONS: OptionsGroupOption[] = [ { + label: 'Vertical', value: BookmarkCardLayout.VERTICAL, - Icon: ({ isActive }) => ( + icon: ({ isActive }) => ( ), - label: 'Vertical', }, { + label: 'Horizontal', value: BookmarkCardLayout.HORIZONTAL, - Icon: ({ isActive }) => ( + icon: ({ isActive }) => ( ), - label: 'Horizontal', }, ]; @@ -69,9 +69,9 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - + @@ -86,15 +86,14 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - + columns={3} disabled={!isLayoutChangeable} name="layout" onChange={(layout) => updateWebBookmark(editor, { layout })} options={LAYOUT_OPTIONS} - selected={activeLayout} - type="radio" + selectedValue={activeLayout} /> Date: Wed, 16 Feb 2022 12:27:14 +0200 Subject: [PATCH 14/18] Rename Button `Icon` prop to `icon` (lowercase) --- .../slate-editor/src/components/Button/Button.stories.tsx | 6 +++--- packages/slate-editor/src/components/Button/Button.tsx | 4 ++-- packages/slate-editor/src/components/Toolbox/Header.tsx | 2 +- .../slate-editor/src/components/Toolbox/Toolbox.stories.tsx | 4 ++-- .../components/WebBookmarkElement/WebBookmarkMenu.tsx | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/slate-editor/src/components/Button/Button.stories.tsx b/packages/slate-editor/src/components/Button/Button.stories.tsx index 6ae2e17d2..0d5047735 100644 --- a/packages/slate-editor/src/components/Button/Button.stories.tsx +++ b/packages/slate-editor/src/components/Button/Button.stories.tsx @@ -23,15 +23,15 @@ export function WithIcon() { return (
- +
-
-
); diff --git a/packages/slate-editor/src/components/Button/Button.tsx b/packages/slate-editor/src/components/Button/Button.tsx index 9d74a74a1..b00404d4a 100644 --- a/packages/slate-editor/src/components/Button/Button.tsx +++ b/packages/slate-editor/src/components/Button/Button.tsx @@ -8,7 +8,7 @@ import styles from './Button.module.scss'; interface ButtonBaseProps { variant?: 'clear'; - Icon?: React.ComponentType>; + icon?: React.ComponentType>; iconPosition?: 'left' | 'right'; fullWidth?: boolean; round?: boolean; @@ -28,7 +28,7 @@ type ButtonProps = AsButtonProps | AsLinkProps; export function Button({ variant, - Icon, + icon: Icon, iconPosition, fullWidth, type, diff --git a/packages/slate-editor/src/components/Toolbox/Header.tsx b/packages/slate-editor/src/components/Toolbox/Header.tsx index 9b31865ea..17809736d 100644 --- a/packages/slate-editor/src/components/Toolbox/Header.tsx +++ b/packages/slate-editor/src/components/Toolbox/Header.tsx @@ -17,7 +17,7 @@ export function Header(props: React.PropsWithChildren) { {props.children} {props.withCloseButton && ( -
); diff --git a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx index 774f55c73..2b23aed23 100644 --- a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx +++ b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx @@ -37,7 +37,7 @@ export function Base() { type="link" variant="clear" href="#" - Icon={ExternalLink} + icon={ExternalLink} iconPosition="right" fullWidth > @@ -63,7 +63,7 @@ export function Base() { - diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index 0391e4d73..4ddf1ef25 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -69,7 +69,7 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - @@ -106,7 +106,7 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - From f3250e8e56cfdf9185fc11afde0a8a1e295d55cc Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Wed, 16 Feb 2022 12:31:50 +0200 Subject: [PATCH 15/18] Do not override Button color and text-decoration from global stylesheet --- .../slate-editor/src/components/Button/Button.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/slate-editor/src/components/Button/Button.module.scss b/packages/slate-editor/src/components/Button/Button.module.scss index 64f405596..2ede0541f 100644 --- a/packages/slate-editor/src/components/Button/Button.module.scss +++ b/packages/slate-editor/src/components/Button/Button.module.scss @@ -22,10 +22,14 @@ &:hover, &:focus-visible { background: rgba(255, 255, 255, 0.12); + color: inherit; + text-decoration: none; } &:active { background: rgba(255, 255, 255, 0.16); + color: inherit; + text-decoration: none; } &:focus-visible { From 2383c2e31cb6ee28271800ee1a33bfd4d4311103 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Wed, 16 Feb 2022 12:32:14 +0200 Subject: [PATCH 16/18] [MT-4618] Fix WebBookmarkMenu buttons to match designs --- .../WebBookmarkElement/WebBookmarkMenu.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx index 4ddf1ef25..a192dc91a 100644 --- a/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx +++ b/packages/slate-editor/src/modules/editor-v4-web-bookmark/components/WebBookmarkElement/WebBookmarkMenu.tsx @@ -69,7 +69,14 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - @@ -106,7 +113,13 @@ export const WebBookmarkMenu: FunctionComponent = ({ element, onClose }) - From 5c16b7c44d721ac48dc68618863e9b279d901601 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Wed, 16 Feb 2022 12:50:23 +0200 Subject: [PATCH 17/18] Fix TS errors --- .../slate-editor/src/components/Toggle/Toggle.stories.tsx | 4 ++-- packages/slate-editor/src/components/Toggle/Toggle.tsx | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/slate-editor/src/components/Toggle/Toggle.stories.tsx b/packages/slate-editor/src/components/Toggle/Toggle.stories.tsx index e5bcad5a2..b67f96fd8 100644 --- a/packages/slate-editor/src/components/Toggle/Toggle.stories.tsx +++ b/packages/slate-editor/src/components/Toggle/Toggle.stories.tsx @@ -9,7 +9,7 @@ export default { export function Base() { return (
- +
); } @@ -17,7 +17,7 @@ export function Base() { export function Disabled() { return (
- +
); } diff --git a/packages/slate-editor/src/components/Toggle/Toggle.tsx b/packages/slate-editor/src/components/Toggle/Toggle.tsx index a66ed2383..5ac92eb97 100644 --- a/packages/slate-editor/src/components/Toggle/Toggle.tsx +++ b/packages/slate-editor/src/components/Toggle/Toggle.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import styles from './Toggle.module.scss'; interface ToggleProps { - disabled?: boolean; name: string; value?: boolean; onChange?: (value: boolean) => void; From 768ca97ae2a50725505456ff7130111d60e1539a Mon Sep 17 00:00:00 2001 From: Dmitrii Pikulin Date: Wed, 16 Feb 2022 18:05:50 +0300 Subject: [PATCH 18/18] Fix visited link styles --- .../slate-editor/src/components/Button/Button.module.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/slate-editor/src/components/Button/Button.module.scss b/packages/slate-editor/src/components/Button/Button.module.scss index 2ede0541f..ff016c048 100644 --- a/packages/slate-editor/src/components/Button/Button.module.scss +++ b/packages/slate-editor/src/components/Button/Button.module.scss @@ -26,6 +26,12 @@ text-decoration: none; } + &:visited, + &:focus { + color: inherit; + text-decoration: none; + } + &:active { background: rgba(255, 255, 255, 0.16); color: inherit;