Skip to content

Commit

Permalink
feat: add config to spanner plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
vincentdchan committed Dec 4, 2023
1 parent 6bbd6a6 commit b0afeee
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ export class SpannerDelegate extends UIDelegate {
this.#instance?.onFocusedNodeChanged?.(v);
}

get width(): number {
return 28;
}

constructor(
private editorController: EditorController,
private factory: SpannerFactory
Expand Down
20 changes: 17 additions & 3 deletions packages/blocky-core/src/plugins/spannerPlugin/spannerPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,25 @@ import { BlockDataElement, Editor, IPlugin, PluginContext } from "../..";
import { take, takeUntil, fromEvent } from "rxjs";
import { SpannerDelegate, SpannerFactory } from "./spannerDelegate";

const defaultWidth = 48;

export interface SpannerPluginOptions {
factory: SpannerFactory;
width?: number;
}

export class SpannerPlugin implements IPlugin {
deletage: SpannerDelegate | undefined;
name = "spanner";

constructor(public readonly factory: SpannerFactory) {}
constructor(public readonly options: SpannerPluginOptions) {}

Check failure on line 16 in packages/blocky-core/src/plugins/spannerPlugin/spannerPlugin.ts

View workflow job for this annotation

GitHub Actions / build (18.x)

Public accessibility modifier on parameter property options

onInitialized(context: PluginContext): void {
const { editor, dispose$ } = context;
this.deletage = new SpannerDelegate(editor.controller, this.factory);
this.deletage = new SpannerDelegate(
editor.controller,
this.options.factory
);
this.deletage.mount(editor.container);

editor.placeSpannerAt$
Expand Down Expand Up @@ -47,12 +57,16 @@ export class SpannerPlugin implements IPlugin {
const offset = block.getSpannerOffset();
x += offset.x;
y += offset.y;
x -= this.deletage.width;
x -= this.width;
this.deletage.focusedNode = node;
this.deletage.show();
this.deletage.setPosition(x, y);
}

get width(): number {
return this.options.width ?? defaultWidth;
}

/**
* Get the element's relative position to the container of the editor.
*/
Expand Down
4 changes: 3 additions & 1 deletion packages/blocky-example/app/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ function makeEditorPlugins(): IPlugin[] {
* Tell the editor how to render the banner.
* We use a banner written in Preact here.
*/
new SpannerPlugin(makeDefaultReactSpanner()),
new SpannerPlugin({
factory: makeDefaultReactSpanner(),
}),
makeCommandPanelPlugin(),
makeAtPanelPlugin(),
];
Expand Down
4 changes: 3 additions & 1 deletion packages/blocky-example/app/loro/loroExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ function makeEditorPlugins(): IPlugin[] {
new ImageBlockPlugin({
placeholder: ({ setSrc }) => <ImagePlaceholder setSrc={setSrc} />,
}),
new SpannerPlugin(makeDefaultReactSpanner()),
new SpannerPlugin({
factory: makeDefaultReactSpanner(),
}),
makeCommandPanelPlugin(),
makeAtPanelPlugin(),
];
Expand Down

0 comments on commit b0afeee

Please sign in to comment.