From 95fb81495821ba33fe62a64982837f00ae301be1 Mon Sep 17 00:00:00 2001 From: zang77 Date: Sun, 3 Jul 2022 12:19:37 -0700 Subject: [PATCH 1/8] Changed insert method argument, signature, and where it's called. --- src/components/ui/toolbox.ts | 164 +++++++++++++++++++++-------------- types/api/blocks.d.ts | 32 +++---- 2 files changed, 113 insertions(+), 83 deletions(-) diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts index 7ae48c58f..00f64a27a 100644 --- a/src/components/ui/toolbox.ts +++ b/src/components/ui/toolbox.ts @@ -1,13 +1,13 @@ -import * as _ from '../utils'; -import { BlockToolAPI } from '../block'; -import Shortcuts from '../utils/shortcuts'; -import BlockTool from '../tools/block'; -import ToolsCollection from '../tools/collection'; -import { API, BlockToolData, ToolboxConfigEntry } from '../../../types'; -import EventsDispatcher from '../utils/events'; -import Popover, { PopoverEvent, PopoverItem } from '../utils/popover'; -import I18n from '../i18n'; -import { I18nInternalNS } from '../i18n/namespace-internal'; +import * as _ from "../utils"; +import { BlockToolAPI } from "../block"; +import Shortcuts from "../utils/shortcuts"; +import BlockTool from "../tools/block"; +import ToolsCollection from "../tools/collection"; +import { API, BlockToolData, ToolboxConfigEntry } from "../../../types"; +import EventsDispatcher from "../utils/events"; +import Popover, { PopoverEvent, PopoverItem } from "../utils/popover"; +import I18n from "../i18n"; +import { I18nInternalNS } from "../i18n/namespace-internal"; /** * @todo the first Tab on the Block — focus Plus Button, the second — focus Block Tunes Toggler, the third — focus next Block @@ -20,23 +20,23 @@ export enum ToolboxEvent { /** * When the Toolbox is opened */ - Opened = 'toolbox-opened', + Opened = "toolbox-opened", /** * When the Toolbox is closed */ - Closed = 'toolbox-closed', + Closed = "toolbox-closed", /** * When the new Block added by Toolbox */ - BlockAdded = 'toolbox-block-added', + BlockAdded = "toolbox-block-added", } /** * Available i18n dict keys that should be passed to the constructor */ -type toolboxTextLabelsKeys = 'filter' | 'nothingFound'; +type toolboxTextLabelsKeys = "filter" | "nothingFound"; /** * Toolbox @@ -98,8 +98,8 @@ export default class Toolbox extends EventsDispatcher { */ private static get CSS(): { [name: string]: string } { return { - toolbox: 'ce-toolbox', - toolboxOpenedTop: 'ce-toolbox--opened-top', + toolbox: "ce-toolbox", + toolboxOpenedTop: "ce-toolbox--opened-top", }; } @@ -115,7 +115,15 @@ export default class Toolbox extends EventsDispatcher { * @param options.api - Editor API methods * @param options.tools - Tools available to check whether some of them should be displayed at the Toolbox or not */ - constructor({ api, tools, i18nLabels }: {api: API; tools: ToolsCollection; i18nLabels: Record}) { + constructor({ + api, + tools, + i18nLabels, + }: { + api: API; + tools: ToolsCollection; + i18nLabels: Record; + }) { super(); this.api = api; @@ -177,7 +185,10 @@ export default class Toolbox extends EventsDispatcher { * @param toolName - tool type to be activated * @param blockDataOverrides - Block data predefined by the activated Toolbox item */ - public toolButtonActivated(toolName: string, blockDataOverrides: BlockToolData): void { + public toolButtonActivated( + toolName: string, + blockDataOverrides: BlockToolData + ): void { this.insertNewBlock(toolName, blockDataOverrides); } @@ -194,7 +205,10 @@ export default class Toolbox extends EventsDispatcher { * if there is not enough available space below it */ if (!this.shouldOpenPopoverBottom) { - this.nodes.toolbox.style.setProperty('--popover-height', this.popover.calculateHeight() + 'px'); + this.nodes.toolbox.style.setProperty( + "--popover-height", + this.popover.calculateHeight() + "px" + ); this.nodes.toolbox.classList.add(Toolbox.CSS.toolboxOpenedTop); } @@ -230,13 +244,20 @@ export default class Toolbox extends EventsDispatcher { */ private get shouldOpenPopoverBottom(): boolean { const toolboxRect = this.nodes.toolbox.getBoundingClientRect(); - const editorElementRect = this.api.ui.nodes.redactor.getBoundingClientRect(); + const editorElementRect = + this.api.ui.nodes.redactor.getBoundingClientRect(); const popoverHeight = this.popover.calculateHeight(); const popoverPotentialBottomEdge = toolboxRect.top + popoverHeight; const popoverPotentialTopEdge = toolboxRect.top - popoverHeight; - const bottomEdgeForComparison = Math.min(window.innerHeight, editorElementRect.bottom); + const bottomEdgeForComparison = Math.min( + window.innerHeight, + editorElementRect.bottom + ); - return popoverPotentialTopEdge < editorElementRect.top || popoverPotentialBottomEdge <= bottomEdgeForComparison; + return ( + popoverPotentialTopEdge < editorElementRect.top || + popoverPotentialBottomEdge <= bottomEdgeForComparison + ); } /** @@ -244,31 +265,29 @@ export default class Toolbox extends EventsDispatcher { */ private onOverlayClicked = (): void => { this.close(); - } + }; /** * Returns list of tools that enables the Toolbox (by specifying the 'toolbox' getter) */ @_.cacheable private get toolsToBeDisplayed(): BlockTool[] { - return Array - .from(this.tools.values()) - .reduce((result, tool) => { - const toolToolboxSettings = tool.toolbox; - - if (toolToolboxSettings) { - const validToolboxSettings = toolToolboxSettings.filter(item => { - return this.areToolboxSettingsValid(item, tool.name); - }); - - result.push({ - ...tool, - toolbox: validToolboxSettings, - }); - } - - return result; - }, []); + return Array.from(this.tools.values()).reduce((result, tool) => { + const toolToolboxSettings = tool.toolbox; + + if (toolToolboxSettings) { + const validToolboxSettings = toolToolboxSettings.filter((item) => { + return this.areToolboxSettingsValid(item, tool.name); + }); + + result.push({ + ...tool, + toolbox: validToolboxSettings, + }); + } + + return result; + }, []); } /** @@ -279,30 +298,35 @@ export default class Toolbox extends EventsDispatcher { /** * Maps tool data to popover item structure */ - const toPopoverItem = (toolboxItem: ToolboxConfigEntry, tool: BlockTool): PopoverItem => { + const toPopoverItem = ( + toolboxItem: ToolboxConfigEntry, + tool: BlockTool + ): PopoverItem => { return { icon: toolboxItem.icon, - label: I18n.t(I18nInternalNS.toolNames, toolboxItem.title || _.capitalize(tool.name)), + label: I18n.t( + I18nInternalNS.toolNames, + toolboxItem.title || _.capitalize(tool.name) + ), name: tool.name, onClick: (e): void => { this.toolButtonActivated(tool.name, toolboxItem.data); }, - secondaryLabel: tool.shortcut ? _.beautifyShortcut(tool.shortcut) : '', + secondaryLabel: tool.shortcut ? _.beautifyShortcut(tool.shortcut) : "", }; }; - return this.toolsToBeDisplayed - .reduce((result, tool) => { - if (Array.isArray(tool.toolbox)) { - tool.toolbox.forEach(item => { - result.push(toPopoverItem(item, tool)); - }); - } else { - result.push(toPopoverItem(tool.toolbox, tool)); - } - - return result; - }, []); + return this.toolsToBeDisplayed.reduce((result, tool) => { + if (Array.isArray(tool.toolbox)) { + tool.toolbox.forEach((item) => { + result.push(toPopoverItem(item, tool)); + }); + } else { + result.push(toPopoverItem(tool.toolbox, tool)); + } + + return result; + }, []); } /** @@ -311,7 +335,10 @@ export default class Toolbox extends EventsDispatcher { * @param toolToolboxSettings - item to validate * @param toolName - name of the tool used in console warning if item is not valid */ - private areToolboxSettingsValid(toolToolboxSettings: ToolboxConfigEntry, toolName: string): boolean { + private areToolboxSettingsValid( + toolToolboxSettings: ToolboxConfigEntry, + toolName: string + ): boolean { /** * Skip tools that don't pass 'toolbox' property */ @@ -320,7 +347,7 @@ export default class Toolbox extends EventsDispatcher { } if (toolToolboxSettings && !toolToolboxSettings.icon) { - _.log('Toolbar icon is missed. Tool %o skipped', 'warn', toolName); + _.log("Toolbar icon is missed. Tool %o skipped", "warn", toolName); return false; } @@ -379,7 +406,10 @@ export default class Toolbox extends EventsDispatcher { * @param {string} toolName - Tool name * @param blockDataOverrides - predefined Block data */ - private async insertNewBlock(toolName: string, blockDataOverrides?: BlockToolData): Promise { + private async insertNewBlock( + toolName: string, + blockDataOverrides?: BlockToolData + ): Promise { const currentBlockIndex = this.api.blocks.getCurrentBlockIndex(); const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex); @@ -391,7 +421,9 @@ export default class Toolbox extends EventsDispatcher { * On mobile version, we see the Plus Button even near non-empty blocks, * so if current block is not empty, add the new block below the current */ - const index = currentBlock.isEmpty ? currentBlockIndex : currentBlockIndex + 1; + const index = currentBlock.isEmpty + ? currentBlockIndex + : currentBlockIndex + 1; let blockData; @@ -404,14 +436,12 @@ export default class Toolbox extends EventsDispatcher { blockData = Object.assign(defaultBlockData, blockDataOverrides); } - const newBlock = this.api.blocks.insert( - toolName, - blockData, - undefined, + const newBlock = this.api.blocks.insert({ + type: toolName, + data: blockData, index, - undefined, - currentBlock.isEmpty - ); + replace: currentBlock.isEmpty, + }); /** * Apply callback before inserting html diff --git a/types/api/blocks.d.ts b/types/api/blocks.d.ts index 21649db8a..bc67a0048 100644 --- a/types/api/blocks.d.ts +++ b/types/api/blocks.d.ts @@ -96,22 +96,22 @@ export interface Blocks { /** * Insert new Block and return inserted Block API * - * @param {string} type — Tool name - * @param {BlockToolData} data — Tool data to insert - * @param {ToolConfig} config — Tool config - * @param {number?} index — index where to insert new Block - * @param {boolean?} needToFocus - flag to focus inserted Block - * @param {boolean?} replace - should the existed Block on that index be replaced or not - */ - insert( - type?: string, - data?: BlockToolData, - config?: ToolConfig, - index?: number, - needToFocus?: boolean, - replace?: boolean, - ): BlockAPI; - + * @param newBlock - new block config + * {string} type — Tool name + * {BlockToolData} data — Tool data to insert + * {ToolConfig} config — Tool config + * {number?} index — index where to insert new Block + * {boolean?} needToFocus - flag to focus inserted Block + * {boolean?} replace - should the existed Block on that index be replaced or not + */ + insert(newBlock: { + type?: string; + data?: BlockToolData; + config?: ToolConfig; + index?: number; + needToFocus?: boolean; + replace?: boolean; + }): BlockAPI; /** * Creates data of an empty block with a passed type. From 9bb01904d29df795d7266bd8485b94f20c06e932 Mon Sep 17 00:00:00 2001 From: zang77 Date: Tue, 5 Jul 2022 12:21:28 -0700 Subject: [PATCH 2/8] Changed insert method argument, signature, and where it's called. --- src/components/ui/toolbox.ts | 154 ++++++++++++++--------------------- types/api/blocks.d.ts | 1 + 2 files changed, 62 insertions(+), 93 deletions(-) diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts index 00f64a27a..4a95d60a9 100644 --- a/src/components/ui/toolbox.ts +++ b/src/components/ui/toolbox.ts @@ -1,13 +1,13 @@ -import * as _ from "../utils"; -import { BlockToolAPI } from "../block"; -import Shortcuts from "../utils/shortcuts"; -import BlockTool from "../tools/block"; -import ToolsCollection from "../tools/collection"; -import { API, BlockToolData, ToolboxConfigEntry } from "../../../types"; -import EventsDispatcher from "../utils/events"; -import Popover, { PopoverEvent, PopoverItem } from "../utils/popover"; -import I18n from "../i18n"; -import { I18nInternalNS } from "../i18n/namespace-internal"; +import * as _ from '../utils'; +import { BlockToolAPI } from '../block'; +import Shortcuts from '../utils/shortcuts'; +import BlockTool from '../tools/block'; +import ToolsCollection from '../tools/collection'; +import { API, BlockToolData, ToolboxConfigEntry } from '../../../types'; +import EventsDispatcher from '../utils/events'; +import Popover, { PopoverEvent, PopoverItem } from '../utils/popover'; +import I18n from '../i18n'; +import { I18nInternalNS } from '../i18n/namespace-internal'; /** * @todo the first Tab on the Block — focus Plus Button, the second — focus Block Tunes Toggler, the third — focus next Block @@ -20,23 +20,23 @@ export enum ToolboxEvent { /** * When the Toolbox is opened */ - Opened = "toolbox-opened", + Opened = 'toolbox-opened', /** * When the Toolbox is closed */ - Closed = "toolbox-closed", + Closed = 'toolbox-closed', /** * When the new Block added by Toolbox */ - BlockAdded = "toolbox-block-added", + BlockAdded = 'toolbox-block-added', } /** * Available i18n dict keys that should be passed to the constructor */ -type toolboxTextLabelsKeys = "filter" | "nothingFound"; +type toolboxTextLabelsKeys = 'filter' | 'nothingFound'; /** * Toolbox @@ -98,8 +98,8 @@ export default class Toolbox extends EventsDispatcher { */ private static get CSS(): { [name: string]: string } { return { - toolbox: "ce-toolbox", - toolboxOpenedTop: "ce-toolbox--opened-top", + toolbox: 'ce-toolbox', + toolboxOpenedTop: 'ce-toolbox--opened-top', }; } @@ -115,15 +115,7 @@ export default class Toolbox extends EventsDispatcher { * @param options.api - Editor API methods * @param options.tools - Tools available to check whether some of them should be displayed at the Toolbox or not */ - constructor({ - api, - tools, - i18nLabels, - }: { - api: API; - tools: ToolsCollection; - i18nLabels: Record; - }) { + constructor({ api, tools, i18nLabels }: {api: API; tools: ToolsCollection; i18nLabels: Record}) { super(); this.api = api; @@ -185,10 +177,7 @@ export default class Toolbox extends EventsDispatcher { * @param toolName - tool type to be activated * @param blockDataOverrides - Block data predefined by the activated Toolbox item */ - public toolButtonActivated( - toolName: string, - blockDataOverrides: BlockToolData - ): void { + public toolButtonActivated(toolName: string, blockDataOverrides: BlockToolData): void { this.insertNewBlock(toolName, blockDataOverrides); } @@ -205,10 +194,7 @@ export default class Toolbox extends EventsDispatcher { * if there is not enough available space below it */ if (!this.shouldOpenPopoverBottom) { - this.nodes.toolbox.style.setProperty( - "--popover-height", - this.popover.calculateHeight() + "px" - ); + this.nodes.toolbox.style.setProperty('--popover-height', this.popover.calculateHeight() + 'px'); this.nodes.toolbox.classList.add(Toolbox.CSS.toolboxOpenedTop); } @@ -244,20 +230,13 @@ export default class Toolbox extends EventsDispatcher { */ private get shouldOpenPopoverBottom(): boolean { const toolboxRect = this.nodes.toolbox.getBoundingClientRect(); - const editorElementRect = - this.api.ui.nodes.redactor.getBoundingClientRect(); + const editorElementRect = this.api.ui.nodes.redactor.getBoundingClientRect(); const popoverHeight = this.popover.calculateHeight(); const popoverPotentialBottomEdge = toolboxRect.top + popoverHeight; const popoverPotentialTopEdge = toolboxRect.top - popoverHeight; - const bottomEdgeForComparison = Math.min( - window.innerHeight, - editorElementRect.bottom - ); - - return ( - popoverPotentialTopEdge < editorElementRect.top || - popoverPotentialBottomEdge <= bottomEdgeForComparison - ); + const bottomEdgeForComparison = Math.min(window.innerHeight, editorElementRect.bottom); + + return popoverPotentialTopEdge < editorElementRect.top || popoverPotentialBottomEdge <= bottomEdgeForComparison; } /** @@ -265,29 +244,31 @@ export default class Toolbox extends EventsDispatcher { */ private onOverlayClicked = (): void => { this.close(); - }; + } /** * Returns list of tools that enables the Toolbox (by specifying the 'toolbox' getter) */ @_.cacheable private get toolsToBeDisplayed(): BlockTool[] { - return Array.from(this.tools.values()).reduce((result, tool) => { - const toolToolboxSettings = tool.toolbox; - - if (toolToolboxSettings) { - const validToolboxSettings = toolToolboxSettings.filter((item) => { - return this.areToolboxSettingsValid(item, tool.name); - }); - - result.push({ - ...tool, - toolbox: validToolboxSettings, - }); - } - - return result; - }, []); + return Array + .from(this.tools.values()) + .reduce((result, tool) => { + const toolToolboxSettings = tool.toolbox; + + if (toolToolboxSettings) { + const validToolboxSettings = toolToolboxSettings.filter(item => { + return this.areToolboxSettingsValid(item, tool.name); + }); + + result.push({ + ...tool, + toolbox: validToolboxSettings, + }); + } + + return result; + }, []); } /** @@ -298,35 +279,30 @@ export default class Toolbox extends EventsDispatcher { /** * Maps tool data to popover item structure */ - const toPopoverItem = ( - toolboxItem: ToolboxConfigEntry, - tool: BlockTool - ): PopoverItem => { + const toPopoverItem = (toolboxItem: ToolboxConfigEntry, tool: BlockTool): PopoverItem => { return { icon: toolboxItem.icon, - label: I18n.t( - I18nInternalNS.toolNames, - toolboxItem.title || _.capitalize(tool.name) - ), + label: I18n.t(I18nInternalNS.toolNames, toolboxItem.title || _.capitalize(tool.name)), name: tool.name, onClick: (e): void => { this.toolButtonActivated(tool.name, toolboxItem.data); }, - secondaryLabel: tool.shortcut ? _.beautifyShortcut(tool.shortcut) : "", + secondaryLabel: tool.shortcut ? _.beautifyShortcut(tool.shortcut) : '', }; }; - return this.toolsToBeDisplayed.reduce((result, tool) => { - if (Array.isArray(tool.toolbox)) { - tool.toolbox.forEach((item) => { - result.push(toPopoverItem(item, tool)); - }); - } else { - result.push(toPopoverItem(tool.toolbox, tool)); - } - - return result; - }, []); + return this.toolsToBeDisplayed + .reduce((result, tool) => { + if (Array.isArray(tool.toolbox)) { + tool.toolbox.forEach(item => { + result.push(toPopoverItem(item, tool)); + }); + } else { + result.push(toPopoverItem(tool.toolbox, tool)); + } + + return result; + }, []); } /** @@ -335,10 +311,7 @@ export default class Toolbox extends EventsDispatcher { * @param toolToolboxSettings - item to validate * @param toolName - name of the tool used in console warning if item is not valid */ - private areToolboxSettingsValid( - toolToolboxSettings: ToolboxConfigEntry, - toolName: string - ): boolean { + private areToolboxSettingsValid(toolToolboxSettings: ToolboxConfigEntry, toolName: string): boolean { /** * Skip tools that don't pass 'toolbox' property */ @@ -347,7 +320,7 @@ export default class Toolbox extends EventsDispatcher { } if (toolToolboxSettings && !toolToolboxSettings.icon) { - _.log("Toolbar icon is missed. Tool %o skipped", "warn", toolName); + _.log('Toolbar icon is missed. Tool %o skipped', 'warn', toolName); return false; } @@ -406,10 +379,7 @@ export default class Toolbox extends EventsDispatcher { * @param {string} toolName - Tool name * @param blockDataOverrides - predefined Block data */ - private async insertNewBlock( - toolName: string, - blockDataOverrides?: BlockToolData - ): Promise { + private async insertNewBlock(toolName: string, blockDataOverrides?: BlockToolData): Promise { const currentBlockIndex = this.api.blocks.getCurrentBlockIndex(); const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex); @@ -421,9 +391,7 @@ export default class Toolbox extends EventsDispatcher { * On mobile version, we see the Plus Button even near non-empty blocks, * so if current block is not empty, add the new block below the current */ - const index = currentBlock.isEmpty - ? currentBlockIndex - : currentBlockIndex + 1; + const index = currentBlock.isEmpty ? currentBlockIndex : currentBlockIndex + 1; let blockData; diff --git a/types/api/blocks.d.ts b/types/api/blocks.d.ts index bc67a0048..9044ca665 100644 --- a/types/api/blocks.d.ts +++ b/types/api/blocks.d.ts @@ -113,6 +113,7 @@ export interface Blocks { replace?: boolean; }): BlockAPI; + /** * Creates data of an empty block with a passed type. * From 2df3e1e0e66c8bfc39f821f08aeda719af1af179 Mon Sep 17 00:00:00 2001 From: Wanxin Hu Date: Wed, 6 Jul 2022 21:50:57 -0400 Subject: [PATCH 3/8] edit documentation, create a type for blocks --- example/tools/embed | 2 +- src/components/modules/api/blocks.ts | 25 ++++++++++++------------- types/api/block.d.ts | 12 ++++++++++++ 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/example/tools/embed b/example/tools/embed index 35742f01a..27e578907 160000 --- a/example/tools/embed +++ b/example/tools/embed @@ -1 +1 @@ -Subproject commit 35742f01ae5875d442b145121d3c9b71b23aea56 +Subproject commit 27e5789079577c7dcaf9de8074d0979fc2e15203 diff --git a/src/components/modules/api/blocks.ts b/src/components/modules/api/blocks.ts index 8d742c850..a898f7541 100644 --- a/src/components/modules/api/blocks.ts +++ b/src/components/modules/api/blocks.ts @@ -1,4 +1,5 @@ import { BlockAPI as BlockAPIInterface, Blocks } from '../../../../types/api'; +import {InsertedBlock} from '../../../../types/api'; import { BlockToolData, OutputData, ToolConfig } from '../../../../types'; import * as _ from './../../utils'; import BlockAPI from '../../block/api'; @@ -30,7 +31,7 @@ export default class BlocksAPI extends Module { getBlocksCount: (): number => this.getBlocksCount(), stretchBlock: (index: number, status = true): void => this.stretchBlock(index, status), insertNewBlock: (): void => this.insertNewBlock(), - insert: this.insert, + insert:() :BlockAPIInterface => this.insert(), update: this.update, composeBlockData: this.composeBlockData, }; @@ -222,22 +223,22 @@ export default class BlocksAPI extends Module { /** * Insert new Block and returns it's API - * + * @param {InsertedBlock} block - The block being inserted * @param {string} type — Tool name * @param {BlockToolData} data — Tool data to insert * @param {ToolConfig} config — Tool config * @param {number?} index — index where to insert new Block * @param {boolean?} needToFocus - flag to focus inserted Block - * @param replace - pass true to replace the Block existed under passed index + * @param {replace?} - pass true to replace the Block existed under passed index */ - public insert = ( - type: string = this.config.defaultBlock, - data: BlockToolData = {}, - config: ToolConfig = {}, - index?: number, - needToFocus?: boolean, - replace?: boolean - ): BlockAPIInterface => { + public insert ({ + type = this.config.defaultBlock, + data = {}, + config = {}, + index, + needToFocus, + replace + }: InsertedBlock = {}): BlockAPIInterface { const insertedBlock = this.Editor.BlockManager.insert({ tool: type, data, @@ -245,7 +246,6 @@ export default class BlocksAPI extends Module { needToFocus, replace, }); - return new BlockAPI(insertedBlock); } @@ -263,7 +263,6 @@ export default class BlocksAPI extends Module { data: {}, tunesData: {}, }); - return block.data; } diff --git a/types/api/block.d.ts b/types/api/block.d.ts index c20e46222..1c0adfdea 100644 --- a/types/api/block.d.ts +++ b/types/api/block.d.ts @@ -74,3 +74,15 @@ export interface BlockAPI { */ dispatchChange(): void; } + +/** + * @interface InsertedBLock Describes methods and properties of inserted blocks + */ +export interface InsertedBlock{ + type?: string, + data?: BlockToolData, + config?: ToolConfig, + index?: number, + needToFocus?: boolean, + replace?: boolean +} \ No newline at end of file From babaf354247529adc148a3777a0a7a9fe47052ad Mon Sep 17 00:00:00 2001 From: Wanxin Hu Date: Thu, 7 Jul 2022 11:02:51 -0400 Subject: [PATCH 4/8] improved insert method --- src/components/modules/api/blocks.ts | 27 ++++----------------------- types/api/block.d.ts | 24 ++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/components/modules/api/blocks.ts b/src/components/modules/api/blocks.ts index a898f7541..d6ef53a44 100644 --- a/src/components/modules/api/blocks.ts +++ b/src/components/modules/api/blocks.ts @@ -31,7 +31,7 @@ export default class BlocksAPI extends Module { getBlocksCount: (): number => this.getBlocksCount(), stretchBlock: (index: number, status = true): void => this.stretchBlock(index, status), insertNewBlock: (): void => this.insertNewBlock(), - insert:() :BlockAPIInterface => this.insert(), + insert:() :BlockAPIInterface => this.insert({}), update: this.update, composeBlockData: this.composeBlockData, }; @@ -224,28 +224,9 @@ export default class BlocksAPI extends Module { /** * Insert new Block and returns it's API * @param {InsertedBlock} block - The block being inserted - * @param {string} type — Tool name - * @param {BlockToolData} data — Tool data to insert - * @param {ToolConfig} config — Tool config - * @param {number?} index — index where to insert new Block - * @param {boolean?} needToFocus - flag to focus inserted Block - * @param {replace?} - pass true to replace the Block existed under passed index */ - public insert ({ - type = this.config.defaultBlock, - data = {}, - config = {}, - index, - needToFocus, - replace - }: InsertedBlock = {}): BlockAPIInterface { - const insertedBlock = this.Editor.BlockManager.insert({ - tool: type, - data, - index, - needToFocus, - replace, - }); + public insert (block: InsertedBlock): BlockAPIInterface { + const insertedBlock = this.Editor.BlockManager.insert(block); return new BlockAPI(insertedBlock); } @@ -277,7 +258,7 @@ export default class BlocksAPI extends Module { public insertNewBlock(): void { _.log('Method blocks.insertNewBlock() is deprecated and it will be removed in the next major release. ' + 'Use blocks.insert() instead.', 'warn'); - this.insert(); + this.insert({}); } /** diff --git a/types/api/block.d.ts b/types/api/block.d.ts index 1c0adfdea..297f2f6a7 100644 --- a/types/api/block.d.ts +++ b/types/api/block.d.ts @@ -78,11 +78,35 @@ export interface BlockAPI { /** * @interface InsertedBLock Describes methods and properties of inserted blocks */ + export interface InsertedBlock{ + /** + * Tool name + */ type?: string, + + /** + * Tool data to insert + */ data?: BlockToolData, + + /** + * Tool config + */ config?: ToolConfig, + + /** + * index where to insert new block + */ index?: number, + + /** + * falg to focus inserted block + */ needToFocus?: boolean, + + /** + * pass true to replace the Block existed under passed index + */ replace?: boolean } \ No newline at end of file From 765b03f7e820cc1d25996e878bc4ac1bcb91738f Mon Sep 17 00:00:00 2001 From: Wanxin Hu <95324285+Wanxin-Hu@users.noreply.github.com> Date: Thu, 7 Jul 2022 11:17:19 -0400 Subject: [PATCH 5/8] Revert "Wanxin issue1817, fixed insert method." --- example/tools/embed | 2 +- src/components/modules/api/blocks.ts | 32 ++++++++++++++++++++----- types/api/block.d.ts | 36 ---------------------------- 3 files changed, 27 insertions(+), 43 deletions(-) diff --git a/example/tools/embed b/example/tools/embed index 27e578907..35742f01a 160000 --- a/example/tools/embed +++ b/example/tools/embed @@ -1 +1 @@ -Subproject commit 27e5789079577c7dcaf9de8074d0979fc2e15203 +Subproject commit 35742f01ae5875d442b145121d3c9b71b23aea56 diff --git a/src/components/modules/api/blocks.ts b/src/components/modules/api/blocks.ts index d6ef53a44..8d742c850 100644 --- a/src/components/modules/api/blocks.ts +++ b/src/components/modules/api/blocks.ts @@ -1,5 +1,4 @@ import { BlockAPI as BlockAPIInterface, Blocks } from '../../../../types/api'; -import {InsertedBlock} from '../../../../types/api'; import { BlockToolData, OutputData, ToolConfig } from '../../../../types'; import * as _ from './../../utils'; import BlockAPI from '../../block/api'; @@ -31,7 +30,7 @@ export default class BlocksAPI extends Module { getBlocksCount: (): number => this.getBlocksCount(), stretchBlock: (index: number, status = true): void => this.stretchBlock(index, status), insertNewBlock: (): void => this.insertNewBlock(), - insert:() :BlockAPIInterface => this.insert({}), + insert: this.insert, update: this.update, composeBlockData: this.composeBlockData, }; @@ -223,10 +222,30 @@ export default class BlocksAPI extends Module { /** * Insert new Block and returns it's API - * @param {InsertedBlock} block - The block being inserted + * + * @param {string} type — Tool name + * @param {BlockToolData} data — Tool data to insert + * @param {ToolConfig} config — Tool config + * @param {number?} index — index where to insert new Block + * @param {boolean?} needToFocus - flag to focus inserted Block + * @param replace - pass true to replace the Block existed under passed index */ - public insert (block: InsertedBlock): BlockAPIInterface { - const insertedBlock = this.Editor.BlockManager.insert(block); + public insert = ( + type: string = this.config.defaultBlock, + data: BlockToolData = {}, + config: ToolConfig = {}, + index?: number, + needToFocus?: boolean, + replace?: boolean + ): BlockAPIInterface => { + const insertedBlock = this.Editor.BlockManager.insert({ + tool: type, + data, + index, + needToFocus, + replace, + }); + return new BlockAPI(insertedBlock); } @@ -244,6 +263,7 @@ export default class BlocksAPI extends Module { data: {}, tunesData: {}, }); + return block.data; } @@ -258,7 +278,7 @@ export default class BlocksAPI extends Module { public insertNewBlock(): void { _.log('Method blocks.insertNewBlock() is deprecated and it will be removed in the next major release. ' + 'Use blocks.insert() instead.', 'warn'); - this.insert({}); + this.insert(); } /** diff --git a/types/api/block.d.ts b/types/api/block.d.ts index 297f2f6a7..c20e46222 100644 --- a/types/api/block.d.ts +++ b/types/api/block.d.ts @@ -74,39 +74,3 @@ export interface BlockAPI { */ dispatchChange(): void; } - -/** - * @interface InsertedBLock Describes methods and properties of inserted blocks - */ - -export interface InsertedBlock{ - /** - * Tool name - */ - type?: string, - - /** - * Tool data to insert - */ - data?: BlockToolData, - - /** - * Tool config - */ - config?: ToolConfig, - - /** - * index where to insert new block - */ - index?: number, - - /** - * falg to focus inserted block - */ - needToFocus?: boolean, - - /** - * pass true to replace the Block existed under passed index - */ - replace?: boolean -} \ No newline at end of file From 3e8527c6680e12b4e4f71c2baf07cf974492f49a Mon Sep 17 00:00:00 2001 From: Wanxin Hu Date: Thu, 7 Jul 2022 11:57:34 -0400 Subject: [PATCH 6/8] improve block insert method --- example/tools/embed | 2 +- src/components/modules/api/blocks.ts | 29 ++++------------------ types/api/block.d.ts | 36 ++++++++++++++++++++++++++++ types/api/blocks.d.ts | 20 ++++------------ 4 files changed, 46 insertions(+), 41 deletions(-) diff --git a/example/tools/embed b/example/tools/embed index 35742f01a..27e578907 160000 --- a/example/tools/embed +++ b/example/tools/embed @@ -1 +1 @@ -Subproject commit 35742f01ae5875d442b145121d3c9b71b23aea56 +Subproject commit 27e5789079577c7dcaf9de8074d0979fc2e15203 diff --git a/src/components/modules/api/blocks.ts b/src/components/modules/api/blocks.ts index 8d742c850..e8b7a42bc 100644 --- a/src/components/modules/api/blocks.ts +++ b/src/components/modules/api/blocks.ts @@ -1,5 +1,6 @@ import { BlockAPI as BlockAPIInterface, Blocks } from '../../../../types/api'; import { BlockToolData, OutputData, ToolConfig } from '../../../../types'; +import {InsertedBlock} from '../../../../types/api'; import * as _ from './../../utils'; import BlockAPI from '../../block/api'; import Module from '../../__module'; @@ -222,30 +223,10 @@ export default class BlocksAPI extends Module { /** * Insert new Block and returns it's API - * - * @param {string} type — Tool name - * @param {BlockToolData} data — Tool data to insert - * @param {ToolConfig} config — Tool config - * @param {number?} index — index where to insert new Block - * @param {boolean?} needToFocus - flag to focus inserted Block - * @param replace - pass true to replace the Block existed under passed index + * @param {InsertedBlock} block - The block being inserted */ - public insert = ( - type: string = this.config.defaultBlock, - data: BlockToolData = {}, - config: ToolConfig = {}, - index?: number, - needToFocus?: boolean, - replace?: boolean - ): BlockAPIInterface => { - const insertedBlock = this.Editor.BlockManager.insert({ - tool: type, - data, - index, - needToFocus, - replace, - }); - + public insert (block: InsertedBlock): BlockAPIInterface { + const insertedBlock = this.Editor.BlockManager.insert(block); return new BlockAPI(insertedBlock); } @@ -278,7 +259,7 @@ export default class BlocksAPI extends Module { public insertNewBlock(): void { _.log('Method blocks.insertNewBlock() is deprecated and it will be removed in the next major release. ' + 'Use blocks.insert() instead.', 'warn'); - this.insert(); + this.insert({}); } /** diff --git a/types/api/block.d.ts b/types/api/block.d.ts index c20e46222..405191036 100644 --- a/types/api/block.d.ts +++ b/types/api/block.d.ts @@ -74,3 +74,39 @@ export interface BlockAPI { */ dispatchChange(): void; } + +/** + * @interface InsertedBLock Describes methods and properties of inserted blocks + */ + + export interface InsertedBlock{ + /** + * Tool name + */ + type?: string, + + /** + * Tool data to insert + */ + data?: BlockToolData, + + /** + * Tool config + */ + config?: ToolConfig, + + /** + * index where to insert new block + */ + index?: number, + + /** + * falg to focus inserted block + */ + needToFocus?: boolean, + + /** + * pass true to replace the Block existed under passed index + */ + replace?: boolean +} \ No newline at end of file diff --git a/types/api/blocks.d.ts b/types/api/blocks.d.ts index 9044ca665..10bb0e6ea 100644 --- a/types/api/blocks.d.ts +++ b/types/api/blocks.d.ts @@ -1,3 +1,4 @@ +import { InsertedBlock } from '.'; import {OutputData} from '../data-formats/output-data'; import {BlockToolData, ToolConfig} from '../tools'; import {BlockAPI} from './block'; @@ -96,22 +97,9 @@ export interface Blocks { /** * Insert new Block and return inserted Block API * - * @param newBlock - new block config - * {string} type — Tool name - * {BlockToolData} data — Tool data to insert - * {ToolConfig} config — Tool config - * {number?} index — index where to insert new Block - * {boolean?} needToFocus - flag to focus inserted Block - * {boolean?} replace - should the existed Block on that index be replaced or not - */ - insert(newBlock: { - type?: string; - data?: BlockToolData; - config?: ToolConfig; - index?: number; - needToFocus?: boolean; - replace?: boolean; - }): BlockAPI; + * @param {InsertedBlock} block - new block config + */ + insert(block: InsertedBlock): BlockAPI; /** From 347e7c147e4ad1e0d299e150a1ccb6329c32eac1 Mon Sep 17 00:00:00 2001 From: Wanxin Hu Date: Mon, 11 Jul 2022 13:00:57 -0400 Subject: [PATCH 7/8] fixed formatting problem --- src/components/modules/api/blocks.ts | 2 +- types/api/blocks.d.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modules/api/blocks.ts b/src/components/modules/api/blocks.ts index e8b7a42bc..46b2acebe 100644 --- a/src/components/modules/api/blocks.ts +++ b/src/components/modules/api/blocks.ts @@ -225,7 +225,7 @@ export default class BlocksAPI extends Module { * Insert new Block and returns it's API * @param {InsertedBlock} block - The block being inserted */ - public insert (block: InsertedBlock): BlockAPIInterface { + public insert(block: InsertedBlock): BlockAPIInterface { const insertedBlock = this.Editor.BlockManager.insert(block); return new BlockAPI(insertedBlock); } diff --git a/types/api/blocks.d.ts b/types/api/blocks.d.ts index 10bb0e6ea..dd1b70513 100644 --- a/types/api/blocks.d.ts +++ b/types/api/blocks.d.ts @@ -1,4 +1,4 @@ -import { InsertedBlock } from '.'; +import {InsertedBlock} from '.'; import {OutputData} from '../data-formats/output-data'; import {BlockToolData, ToolConfig} from '../tools'; import {BlockAPI} from './block'; From c56e80cd097af26b0eb127456bf317a8542c0e46 Mon Sep 17 00:00:00 2001 From: Wanxin Hu Date: Fri, 15 Jul 2022 10:17:02 -0400 Subject: [PATCH 8/8] some minor fix --- src/components/modules/api/blocks.ts | 16 +++++++++++++--- src/components/ui/toolbox.ts | 2 ++ types/api/block.d.ts | 8 ++++---- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/modules/api/blocks.ts b/src/components/modules/api/blocks.ts index 46b2acebe..1d9837f73 100644 --- a/src/components/modules/api/blocks.ts +++ b/src/components/modules/api/blocks.ts @@ -225,8 +225,18 @@ export default class BlocksAPI extends Module { * Insert new Block and returns it's API * @param {InsertedBlock} block - The block being inserted */ - public insert(block: InsertedBlock): BlockAPIInterface { - const insertedBlock = this.Editor.BlockManager.insert(block); + public insert = (block: InsertedBlock = { + type : this.config.defaultBlock, + data: {}, + config: {} + }): BlockAPIInterface => { + const insertedBlock = this.Editor.BlockManager.insert({ + tool: block.type, + data: block.data, + index: block.index, + needToFocus: block.needToFocus, + replace: block.replace, + }); return new BlockAPI(insertedBlock); } @@ -259,7 +269,7 @@ export default class BlocksAPI extends Module { public insertNewBlock(): void { _.log('Method blocks.insertNewBlock() is deprecated and it will be removed in the next major release. ' + 'Use blocks.insert() instead.', 'warn'); - this.insert({}); + this.insert(); } /** diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts index 4a95d60a9..991db0c6e 100644 --- a/src/components/ui/toolbox.ts +++ b/src/components/ui/toolbox.ts @@ -9,6 +9,7 @@ import Popover, { PopoverEvent, PopoverItem } from '../utils/popover'; import I18n from '../i18n'; import { I18nInternalNS } from '../i18n/namespace-internal'; + /** * @todo the first Tab on the Block — focus Plus Button, the second — focus Block Tunes Toggler, the third — focus next Block */ @@ -407,6 +408,7 @@ export default class Toolbox extends EventsDispatcher { const newBlock = this.api.blocks.insert({ type: toolName, data: blockData, + config: undefined, index, replace: currentBlock.isEmpty, }); diff --git a/types/api/block.d.ts b/types/api/block.d.ts index 405191036..3b7e00585 100644 --- a/types/api/block.d.ts +++ b/types/api/block.d.ts @@ -83,17 +83,17 @@ export interface BlockAPI { /** * Tool name */ - type?: string, + type: string, /** * Tool data to insert */ - data?: BlockToolData, + data: BlockToolData, /** * Tool config */ - config?: ToolConfig, + config: ToolConfig, /** * index where to insert new block @@ -101,7 +101,7 @@ export interface BlockAPI { index?: number, /** - * falg to focus inserted block + * flag to focus inserted block */ needToFocus?: boolean,