Feat/resize image

packages/blocky-example/app/app.tsx

@@ -6,10 +6,11 @@ import {
   BlockyEditor,
   makeReactSpanner,
   makeReactToolbar,
+  makeImageBlockPlugin,
   type SpannerRenderProps,
 } from "blocky-react";
 import SearchBox from "@pkg/components/searchBox";
-import { makeImageBlockPlugin } from "./plugins/imageBlock";
+import ImagePlaceholder from "@pkg/components/imagePlaceholder";
 import { makeCommandPanelPlugin } from "./plugins/commandPanel";
 import { makeAtPanelPlugin } from "./plugins/atPanel";
 import SpannerMenu from "./spannerMenu";
@@ -23,7 +24,9 @@ import "blocky-core/css/blocky-core.css";
 
 function makeEditorPlugins(): IPlugin[] {
   return [
-    makeImageBlockPlugin(),
+    makeImageBlockPlugin({
+      placeholder: ({ setSrc }) => <ImagePlaceholder setSrc={setSrc} />,
+    }),
     makeCommandPanelPlugin(),
     makeAtPanelPlugin(),
   ];

packages/blocky-example/app/noTitle/noTitle.tsx

@@ -1,15 +1,21 @@
 import { Component, ReactNode, createRef } from "react";
-import { BlockyEditor, makeReactToolbar } from "blocky-react";
+import {
+  BlockyEditor,
+  makeReactToolbar,
+  makeImageBlockPlugin,
+} from "blocky-react";
 import { EditorController, IPlugin } from "blocky-core";
-import { makeImageBlockPlugin } from "@pkg/app/plugins/imageBlock";
+import ImagePlaceholder from "@pkg/components/imagePlaceholder";
 import { makeCommandPanelPlugin } from "@pkg/app/plugins/commandPanel";
 import { makeAtPanelPlugin } from "@pkg/app/plugins/atPanel";
 import ToolbarMenu from "@pkg/app/toolbarMenu";
 import { timer, Subject, takeUntil } from "rxjs";
 
 function makeEditorPlugins(): IPlugin[] {
   return [
-    makeImageBlockPlugin(),
+    makeImageBlockPlugin({
+      placeholder: ({ setSrc }) => <ImagePlaceholder setSrc={setSrc} />,
+    }),
     makeCommandPanelPlugin(),
     makeAtPanelPlugin(),
   ];

packages/blocky-example/app/spannerMenu.tsx

@@ -2,7 +2,7 @@ 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 "@pkg/app/plugins/imageBlock";
+import { ImageBlockName } from "blocky-react";
 import { Subject, takeUntil } from "rxjs";
 import "./spannerMenu.scss";
 

packages/blocky-example/components/imagePlaceholder.module.css

@@ -0,0 +1,8 @@
+.fileSelector {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  top: 0px;
+  left: 0px;
+  opacity: 0;
+}

packages/blocky-example/components/imagePlaceholder.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { useRef } from "react";
+import Button from "@pkg/components/button";
+import styles from "./imagePlaceholder.module.css";
+
+function ImagePlaceholder({ setSrc }: { setSrc: (src: string) => void }) {
+  const selectorRef = useRef<HTMLInputElement>(null);
+  const handleUpload = () => {
+    selectorRef.current?.click();
+  };
+  const handleSelectedFileChanged = () => {
+    const files = selectorRef.current?.files;
+    if (!files || files.length === 0) {
+      return;
+    }
+    const fr = new FileReader();
+    fr.onload = () => {
+      setSrc(fr.result as string);
+    };
+    fr.readAsDataURL(files[0]);
+  };
+  return (
+    <>
+      <Button onClick={handleUpload}>Upload</Button>
+      <input
+        type="file"
+        accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*"
+        className={styles.fileSelector}
+        onChange={handleSelectedFileChanged}
+        ref={selectorRef}
+      />
+    </>
+  );
+}
+
+export default ImagePlaceholder;

packages/blocky-react/package.json

@@ -27,9 +27,11 @@
     "blocky-core": "workspace:^3.3.0"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
     "blocky-common": "workspace:3.3.0",
     "lodash-es": "*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "rxjs": "^7.8.1"
   }
 }

packages/blocky-react/src/blockActiveDetector.tsx

@@ -1,22 +1,18 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useContext } from "react";
 import {
-  type EditorController,
   type CursorChangedEvent,
   type CursorStateUpdateEvent,
 } from "blocky-core";
+import { ReactBlockContext } from "./reactBlock";
 
-export interface BlockActiveDetectorProps {
-  controller: EditorController;
-  blockId: string;
-}
-
-export function useBlockActive(props: BlockActiveDetectorProps): boolean {
+export function useBlockActive(): boolean {
+  const ctx = useContext(ReactBlockContext)!;
   const [active, setActive] = useState<boolean>(false);
   const cursorUpdateHandler = useRef<
     ((e: CursorStateUpdateEvent) => void) | undefined
   >(undefined);
 
-  const { controller, blockId } = props;
+  const { editorController: controller, blockId } = ctx;
 
   useEffect(() => {
     cursorUpdateHandler.current = (evt: CursorStateUpdateEvent) => {
@@ -43,24 +39,23 @@ export function useBlockActive(props: BlockActiveDetectorProps): boolean {
   return active;
 }
 
-export function useCollaborativeOutlineColor(
-  props: BlockActiveDetectorProps
-): string | undefined {
+export function useCollaborativeOutlineColor(): string | undefined {
+  const ctx = useContext(ReactBlockContext)!;
   const [collaborativeOutlineColor, setCollaborativeOutlineColor] = useState<
     string | undefined
   >(undefined);
-  const { controller, blockId } = props;
+  const { editorController: controller, blockId } = ctx;
   const applyCursorChangedEventHandler = useRef<
     ((e: CursorChangedEvent) => void) | undefined
   >(undefined);
 
   useEffect(() => {
     applyCursorChangedEventHandler.current = (evt: CursorChangedEvent) => {
       const { state } = evt;
+      const { editorController: controller, blockId } = ctx;
       const shouldShowOutline =
-        state !== null && state.isCollapsed && state.id === props.blockId;
+        state !== null && state.isCollapsed && state.id === blockId;
 
-      const { controller } = props;
       const { editor } = controller;
       if (!editor) {
         return;