From 9b23c55b1e18812e637dadc2cd514c97d1050f20 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 4 Feb 2022 07:56:12 +0100 Subject: [PATCH 1/3] feat: edit code style on doc Signed-off-by: peterpeterparker --- studio/src/app/menus/code.menu.ts | 38 ++++++++++++++++--- .../app-element-style/app-element-style.tsx | 4 +- studio/src/components.d.ts | 4 +- 3 files changed, 37 insertions(+), 9 deletions(-) diff --git a/studio/src/app/menus/code.menu.ts b/studio/src/app/menus/code.menu.ts index 3e006785d..ad7db4137 100644 --- a/studio/src/app/menus/code.menu.ts +++ b/studio/src/app/menus/code.menu.ts @@ -1,15 +1,20 @@ -import {StyloMenu} from '@papyrs/stylo'; import {popoverController} from '@ionic/core'; +import {StyloMenu} from '@papyrs/stylo'; + +import {SelectedTarget} from '../types/editor/selected-target'; + +import {SelectedElementUtils} from '../utils/editor/selected-element.utils'; + export const codeMenu: StyloMenu = { match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code', actions: [ { text: 'edit_code', - icon: ` - - - `, + icon: ` + + + `, action: async ({paragraph}: {paragraph: HTMLElement}) => { const editCode: CustomEvent = new CustomEvent('editCode', { bubbles: true @@ -18,6 +23,29 @@ export const codeMenu: StyloMenu = { paragraph.dispatchEvent(editCode); } }, + { + text: 'style', + icon: ` + + + `, + action: async ({paragraph}: {paragraph: HTMLElement}) => { + const popover: HTMLIonPopoverElement = await popoverController.create({ + component: 'app-element-style', + componentProps: { + selectedTarget: { + target: paragraph, + ...(SelectedElementUtils.initDescription(paragraph) as SelectedTarget) + } + }, + mode: 'ios', + showBackdrop: false, + cssClass: 'popover-menu' + }); + + await popover.present(); + } + }, { text: 'options', icon: ` diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index b1c16ff6a..eb34626cf 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -20,10 +20,10 @@ export class AppElementStyle { selectedTarget: SelectedTarget; @Prop() - imgDidChange: EventEmitter; + imgDidChange?: EventEmitter; @Prop() - imageHelper: ImageHelper; + imageHelper?: ImageHelper; @Event() optionsDidChange: EventEmitter; diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 08fdee3a7..8f4a5c536 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -197,8 +197,8 @@ export namespace Components { interface AppEditor { } interface AppElementStyle { - "imageHelper": ImageHelper; - "imgDidChange": EventEmitter; + "imageHelper"?: ImageHelper; + "imgDidChange"?: EventEmitter; "selectedTarget": SelectedTarget; } interface AppEmbed { From 1bd1cf5018c2271704c2c320f4dc3f2578c9616c Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 4 Feb 2022 10:36:41 +0100 Subject: [PATCH 2/3] feat: exclude attributes Signed-off-by: peterpeterparker --- studio/src/app/config/editor.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/studio/src/app/config/editor.ts b/studio/src/app/config/editor.ts index cbdeaff80..aebf685ce 100644 --- a/studio/src/app/config/editor.ts +++ b/studio/src/app/config/editor.ts @@ -10,5 +10,6 @@ import {codeMenu} from '../menus/code.menu'; export const editorConfig: Partial = { plugins: [h1, h2, h3, ul, imgStorage, imgUnsplash, imgGif, code, hr], - menus: [codeMenu] + menus: [codeMenu], + excludeAttributes: ['editable', 'paragraph_id', 'highlighted', 'custom-loader'] }; From 5e6c6c05ad10829a5cb663a347953c740b091d15 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 4 Feb 2022 10:42:37 +0100 Subject: [PATCH 3/3] feat: filter attributes for update paragraphs Signed-off-by: peterpeterparker --- studio/src/app/config/editor.ts | 2 +- studio/src/app/events/editor/doc/doc.data.events.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/studio/src/app/config/editor.ts b/studio/src/app/config/editor.ts index aebf685ce..5fb53b6a7 100644 --- a/studio/src/app/config/editor.ts +++ b/studio/src/app/config/editor.ts @@ -11,5 +11,5 @@ import {codeMenu} from '../menus/code.menu'; export const editorConfig: Partial = { plugins: [h1, h2, h3, ul, imgStorage, imgUnsplash, imgGif, code, hr], menus: [codeMenu], - excludeAttributes: ['editable', 'paragraph_id', 'highlighted', 'custom-loader'] + excludeAttributes: ['id', 'hydrated', 'editable', 'paragraph_id', 'highlighted', 'custom-loader'] }; diff --git a/studio/src/app/events/editor/doc/doc.data.events.ts b/studio/src/app/events/editor/doc/doc.data.events.ts index 04034ba28..4efc5e707 100644 --- a/studio/src/app/events/editor/doc/doc.data.events.ts +++ b/studio/src/app/events/editor/doc/doc.data.events.ts @@ -13,6 +13,7 @@ import { deleteOfflineParagraph, updateOfflineParagraph } from '../../../providers/data/paragraph/paragraph.offline.provider'; +import {editorConfig} from '../../../config/editor'; export class DocDataEvents { init() { @@ -273,7 +274,8 @@ export class DocDataEvents { private paragraphAttributes(paragraph: HTMLElement): Record | null { const attrs: Attr[] = Array.from(paragraph.attributes).filter( - ({nodeName}: Attr) => !['id', 'hydrated', 'class', 'contenteditable', 'paragraph_id'].includes(nodeName) + ({nodeName}: Attr) => + !['placeholder', 'data-gramm', 'class', 'spellcheck', 'contenteditable', ...editorConfig.excludeAttributes].includes(nodeName) ); return attrs.length > 0