Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/default spannar menu #92

Merged
merged 7 commits into from
Nov 27, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: spannar style
  • Loading branch information
vincentdchan committed Nov 27, 2023
commit af50f43dc5d506a21b1263175d0bb634e40d8a36
4 changes: 4 additions & 0 deletions packages/blocky-core/src/view/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1894,6 +1894,10 @@ export class Editor {
return undefined;
}

get fontFamily(): string {
return this.themeData?.font ?? blockyDefaultFonts;
}

handleBlocksContainerMouseMove(e: MouseEvent) {
const y = e.clientY;
const blockSizes = this.#collectBlocksSize();
Expand Down
3 changes: 1 addition & 2 deletions packages/blocky-example/app/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,12 @@ import {
makeImageBlockPlugin,
type SpannerRenderProps,
DefaultToolbarMenu,
SpannerMenu,
} from "blocky-react";
import SearchBox from "@pkg/components/searchBox";
import ImagePlaceholder from "@pkg/components/imagePlaceholder";
import { makeCommandPanelPlugin } from "./plugins/commandPanel";
import { makeAtPanelPlugin } from "./plugins/atPanel";
import SpannerMenu from "./spannerMenu";
// import ToolbarMenu from "./toolbarMenu";
import TianShuiWeiImage from "./tianshuiwei.jpg";
import Image from "next/image";
import { blockyExampleFont, Theme } from "./themeSwitch";
Expand Down
32 changes: 0 additions & 32 deletions packages/blocky-example/app/spannerMenu.scss

This file was deleted.

29 changes: 0 additions & 29 deletions packages/blocky-example/components/dropdown/dropdown.tsx

This file was deleted.

28 changes: 0 additions & 28 deletions packages/blocky-example/components/menu/menu.scss

This file was deleted.

43 changes: 0 additions & 43 deletions packages/blocky-example/components/menu/menu.tsx

This file was deleted.

25 changes: 25 additions & 0 deletions packages/blocky-react/src/components/dropdown/dropdown.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { createPortal } from "react-dom";
import Mask from "@pkg/components/mask";

export interface DropdownProps {
show?: boolean;
onMaskClicked?: () => void;
overlay?: any;
children?: any;
}

function Dropdown(props: DropdownProps) {
const { children, show, onMaskClicked, overlay } = props;
return (
<>
{children}
{show &&
createPortal(
<Mask onClick={onMaskClicked}>{overlay}</Mask>,
document.body
)}
</>
);
}

export default Dropdown;
66 changes: 66 additions & 0 deletions packages/blocky-react/src/components/menu/menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from "react";
import { css } from "@emotion/react";

export interface MenuProps {
style?: React.CSSProperties;
children?: any;
}

const menuStyle = css({
fontFamily: "var(--blocky-font)",
backgroundColor: "var(--bg-color)",
boxShadow: "0px 0px 4px rgba(0, 0, 0, 0.2)",
borderRadius: "8px",
overflow: "hidden",
});

export function Menu(props: MenuProps) {
const { children, style } = props;
return (
<div css={menuStyle} style={style}>
{children}
</div>
);
}

export interface MenuItemProps {
style?: React.CSSProperties;
onClick?: () => void;
children?: any;
}

const menuItemStyle = css({
width: "240px",
padding: "8px 12px",
fontSize: "14px",
color: "rgb(72, 72, 72)",
"&:hover": {
backgroundColor: "rgba(0, 0, 0, 0.1)",
},
});

export function MenuItem(props: MenuItemProps) {
const { style, onClick, children } = props;
return (
<div
css={menuItemStyle}
className="blocky-cm-noselect"
onClick={onClick}
style={style}
>
{children}
</div>
);
}

const dividerStyle = css({
marginTop: "4px",
marginBottom: "4px",
width: "100%",
height: "1px",
backgroundColor: "rgb(236, 236, 236)",
});

export function Divider() {
return <div css={dividerStyle} className="blocky-menu-divider"></div>;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { Component, type RefObject, createRef } from "react";
import { type EditorController, BlockDataElement, TextType } from "blocky-core";
import Dropdown from "@pkg/components/dropdown";
import { Menu, MenuItem, Divider } from "@pkg/components/menu";
import { ImageBlockName } from "blocky-react";
import { ImageBlockName } from "../";
import { Subject, takeUntil } from "rxjs";
import "./spannerMenu.scss";
import { css } from "@emotion/react";

export interface SpannerProps {
editorController: EditorController;
Expand All @@ -22,6 +22,25 @@ const SpannerIcon = `
<svg role="graphics-symbol" viewBox="0 0 10 10" class="dragHandle" style="width: 14px; height: 14px; display: block; fill: inherit; flex-shrink: 0;"><path d="M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z"></path></svg>
`;

const buttonStyle = css({
width: "16px",
height: "16px",
borderRadius: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingTop: "3px",
paddingBottom: "3px",
"&:hover": {
cursor: "grab",
boxShadow: "0px 0px 8px rgba(0, 0, 0, 0.2)",
},
svg: {
width: "100%",
height: "100%",
},
});

class SpannerMenu extends Component<SpannerProps, SpannerState> {
private bannerRef: RefObject<HTMLDivElement> = createRef();
private dispose$ = new Subject<void>();
Expand Down Expand Up @@ -121,7 +140,14 @@ class SpannerMenu extends Component<SpannerProps, SpannerState> {
menuY += 36;
return (
<Menu
style={{ position: "fixed", left: `${menuX}px`, top: `${menuY}px` }}
style={{
position: "fixed",
left: `${menuX}px`,
top: `${menuY}px`,
...{
["--blocky-font"]: this.props.editorController.editor?.fontFamily,
},
}}
>
<MenuItem onClick={this.insertText(TextType.Normal)}>Text</MenuItem>
<MenuItem onClick={this.insertText(TextType.Heading1)}>
Expand Down Expand Up @@ -162,7 +188,7 @@ class SpannerMenu extends Component<SpannerProps, SpannerState> {
>
<div
ref={this.bannerRef}
className="blocky-example-banner-button"
css={buttonStyle}
onClick={this.handleClick}
></div>
</Dropdown>
Expand Down
3 changes: 3 additions & 0 deletions packages/blocky-react/src/defaultSpannerMenu/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import SpannerMenu from "./defaultSpannerMenu";

export { SpannerMenu };
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const ToolbarMenuItem = memo(
}
);

interface DefaultToolbarMenuProps {
export interface DefaultToolbarMenuProps {
editorController: EditorController;
}

Expand Down
6 changes: 4 additions & 2 deletions packages/blocky-react/src/defaultToolbar/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import DefaultToolbarMenu from "./defaultToolbar";
import DefaultToolbarMenu, {
type DefaultToolbarMenuProps,
} from "./defaultToolbar";

export { DefaultToolbarMenu };
export { DefaultToolbarMenu, type DefaultToolbarMenuProps };
1 change: 1 addition & 0 deletions packages/blocky-react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export * from "./blocks";
export * from "./reactFollowerWidget";
export * from "./blockActiveDetector";
export * from "./defaultToolbar";
export * from "./defaultSpannerMenu";
export {
makeReactSpanner,
type RenderProps as SpannerRenderProps,
Expand Down