diff --git a/CHANGELOG.md b/CHANGELOG.md index 269366950..d1f55d155 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +#### [v0.64.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.2...v0.64.0) + +- fix(preview): update overflow behaviour [`#1742`](https://github.com/isomerpages/isomercms-frontend/pull/1742) +- IS-807 Fixed duplicating issue when setting hyperlink & alt text for image in RTE [`#1738`](https://github.com/isomerpages/isomercms-frontend/pull/1738) +- refactor(legacy/markdown-editpae): update width [`#1739`](https://github.com/isomerpages/isomercms-frontend/pull/1739) +- IS-712 Fixed image resizing issue in RTE [`#1736`](https://github.com/isomerpages/isomercms-frontend/pull/1736) +- chore(sidebar): update link to issue reporting form [`#1737`](https://github.com/isomerpages/isomercms-frontend/pull/1737) +- Hotfix/v0.63.2 [`#1734`](https://github.com/isomerpages/isomercms-frontend/pull/1734) +- hotfix/v0.63.1 [`#1732`](https://github.com/isomerpages/isomercms-frontend/pull/1732) +- release(0.63.0): merge to develop [`#1725`](https://github.com/isomerpages/isomercms-frontend/pull/1725) + #### [v0.63.2](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.1...v0.63.2) +> 6 December 2023 + - fix(legacyeditpage): more style fix [`2e578a2`](https://github.com/isomerpages/isomercms-frontend/commit/2e578a26456679302169a0184fa84268a296b4bb) #### [v0.63.1](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.0...v0.63.1) diff --git a/package-lock.json b/package-lock.json index 19d3475cd..464669af8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "isomercms-frontend", - "version": "0.63.2", + "version": "0.64.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "isomercms-frontend", - "version": "0.63.2", + "version": "0.64.0", "hasInstallScript": true, "dependencies": { "@braintree/sanitize-url": "^6.0.1", diff --git a/package.json b/package.json index c37833d3a..02a0269ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "isomercms-frontend", - "version": "0.63.2", + "version": "0.64.0", "private": true, "engines": { "node": ">=16.0.0" diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 489a773f6..6f9c73561 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -174,7 +174,7 @@ export const Sidebar = (): JSX.Element => { diff --git a/src/layouts/EditPage/MarkdownEditPage.tsx b/src/layouts/EditPage/MarkdownEditPage.tsx index da1f5242e..ee059671f 100644 --- a/src/layouts/EditPage/MarkdownEditPage.tsx +++ b/src/layouts/EditPage/MarkdownEditPage.tsx @@ -129,7 +129,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => { setEditorContent={(content: string) => setEditorValue(content)} shouldDisableSave={isAnyDrawerOpen} > - + @@ -164,8 +164,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => { {/* Preview */} diff --git a/src/layouts/LegacyEditPage.jsx b/src/layouts/LegacyEditPage.jsx index 51e236430..5f25d50fc 100644 --- a/src/layouts/LegacyEditPage.jsx +++ b/src/layouts/LegacyEditPage.jsx @@ -97,7 +97,7 @@ const EditPage = ({ match }) => { setEditorContent={setEditorValue} > {/* Editor */} - + setEditorValue(value)} @@ -109,7 +109,7 @@ const EditPage = ({ match }) => { {/* Preview */} { )} - {/* + {({ isOpen, onClose }) => ( <> @@ -148,7 +148,7 @@ const ImageLinkButton = () => { )} - */} + { if (isOpen) { const initialValue: string | number = - editor.state.selection.content().content.firstChild?.attrs.width ?? 100 + editor.state.selection + .content() + // regex to parse the width value from style tag + .content.firstChild?.attrs.style?.match(/width: (\d+)%/)?.[1] ?? 100 if (typeof initialValue === "string") { methods.setValue( "value", - initialValue.endsWith("%") ? Number(initialValue.slice(0, -1)) : 100 + initialValue.endsWith("%") + ? Number(initialValue.slice(0, -1)) + : Number(initialValue) ) } else { methods.setValue("value", initialValue) } } - }, [isOpen]) + }, [editor.state.selection, isOpen, methods]) return ( diff --git a/src/layouts/components/Editor/extensions/Image/Image.ts b/src/layouts/components/Editor/extensions/Image/Image.ts index 63b67ddfc..308314ed5 100644 --- a/src/layouts/components/Editor/extensions/Image/Image.ts +++ b/src/layouts/components/Editor/extensions/Image/Image.ts @@ -13,11 +13,19 @@ interface IsomerImageOptions { href?: string } +interface IsomerImageStyle { + width?: number +} + declare module "@tiptap/core" { interface Commands { isomerImage: { setImage: (options: IsomerImageOptions) => ReturnType + setImageMeta: ( + options: Pick + ) => ReturnType deleteImage: () => ReturnType + setImageStyle: (style: IsomerImageStyle) => ReturnType } } } @@ -40,6 +48,9 @@ export const IsomerImage = Image.extend({ height: { default: "auto", }, + style: { + default: "width: 100%", + }, href: { default: null, parseHTML: (element) => @@ -76,10 +87,56 @@ export const IsomerImage = Image.extend({ return true }, + setImageMeta: (options) => ({ tr, dispatch, editor }) => { + const { from, to } = tr.selection + + tr.doc.nodesBetween(from, to, (node, pos) => { + if (node.type === editor.schema.nodes.image) { + tr.setNodeMarkup(pos, null, { ...node.attrs, ...options }) + } + }) + + if (dispatch) { + tr.scrollIntoView() + } + + return true + }, + deleteImage: () => ({ tr, editor }) => { editor.state.selection.replace(tr) return true }, + + setImageStyle: (styleOptions) => ({ tr, dispatch, editor }) => { + const { from, to } = tr.selection + + let style = "" + + if (styleOptions.width) { + if (styleOptions.width < 1 || styleOptions.width > 100) { + console.error( + "Invalid width value. It should be between 1 and 100." + ) + return false + } + style += `width: ${styleOptions.width}%;` + } + + const attrs = { style } + + tr.doc.nodesBetween(from, to, (node, pos) => { + if (node.type === editor.schema.nodes.image) { + tr.setNodeMarkup(pos, null, { ...node.attrs, ...attrs }) + } + }) + + if (dispatch) { + tr.scrollIntoView() + } + + return true + }, } },