+ window?.getSelection()?.toString().length && displayFormatter(true)
+ }
onKeyDown={(e) => {
- const selection = winObj?.getSelection()
- if (selection && contentState) {
- const range = selection.getRangeAt(0)
- if (e.key === "Enter") {
- e.preventDefault()
- splitChunkAtCursor(
- selection,
- contentState,
- activeChunkRef,
- updateContentState,
- )
- } else if (e.key === "Backspace") {
- if (range && range.startOffset > 0) {
- range.setStart(range.startContainer, range.startOffset - 1)
- range.deleteContents()
- }
- } else if (e.key === "Delete") {
- if (isMac || isIOS || isAndroid) {
- if (range.startOffset > 0) {
- range.setStart(range.startContainer, range.startOffset - 1)
- range.deleteContents()
- }
- } else {
- // On Windows, "Delete" key deletes character after the cursor
- if (
- range.startContainer.textContent &&
- range.startOffset < range.startContainer.textContent.length
- ) {
- range.setEnd(range.startContainer, range.startOffset + 1)
- range.deleteContents()
- }
- }
- }
- }
+ const updatedState = (
+ eventHandlers.keydown as EventHandlerCollection
+ ).onKeyDown(e, state, activeChunkRef)
+ setState({ ...updatedState })
+ }}
+ onBeforeInput={(e) => {
+ e.preventDefault()
+ const updatedState = (
+ eventHandlers.input as EventHandlerCollection
+ ).handleInput(
+ (e as CompositionEvent
).data,
+ state,
+ activeChunkRef,
+ )
+ setState({ ...updatedState })
+ onCommit && onCommit(flexContentRef, state.registry, activeChunkRef)
+ keyRef.current = undefined
}}
- onBeforeInput={handleInput}
contentEditable={isEditable}
suppressContentEditableWarning={true}
>
{textConfigs?.map((entry) => {
const props: TextProps = {
- descriptor: entry[1] as TextInfo,
+ descriptor: {
+ ...(entry[1] as TextInfo),
+ },
allowFormatting,
isEditable,
demo,
}
+ if (
+ activeChunkRef.current &&
+ Object.keys(entry[1].chunks).indexOf(activeChunkRef.current.id) > -1
+ ) {
+ props.descriptor.cursorPosition = state.cursorPosition
+ }
return (
)
@@ -312,7 +193,7 @@ const FlexContent = (props: FlexContentProps): JSX.Element => {
<>
{isEditable && allowFormatting && hasFloatingFormatter ? (
displayFormatter(false)}
@@ -327,9 +208,9 @@ const FlexContent = (props: FlexContentProps): JSX.Element => {
activeFormats={activeChunkRef.current?.formats}
demo={demo}
slot={ArPopoverSlots.POPOVER}
- content={contentState}
+ content={state.registry}
callback={(state) => {
- updateContentState(state)
+ setState({ ...state })
selectionInfoRef.current = null
}}
selectionInfo={selectionInfoRef.current}
@@ -340,43 +221,49 @@ const FlexContent = (props: FlexContentProps): JSX.Element => {
) : (
contentRenders
)}
-
-
-
-
Content Registry
-
- {JSON.stringify(
- contentState?.contentRegistry,
- (key, value) => {
- if (key.startsWith("__reactFiber")) {
- if (value.stateNode?.data) {
- return value.stateNode.data
- } else {
- return value.toString()
- }
- }
- if (key === "id" || key === "length") {
- return undefined
- }
- return value
- },
- 2,
- )}
-
-
-
-
Active Chunk (ref - no live update)
-
- {JSON.stringify(activeChunkRef.current, null, 2)}
-
-
-
-
Selection Info (ref - no live update)
-
- {JSON.stringify(selectionInfoRef.current, null, 2)}
-
-
-
+
+
+
+
Content Registry
+
+ {JSON.stringify(
+ state.registry,
+ (key, value) => {
+ if (key.startsWith("__reactFiber")) {
+ if (value.stateNode?.data) {
+ return value.stateNode.data
+ } else {
+ return value.toString()
+ }
+ }
+ if (key === "id" || key === "length") {
+ return undefined
+ }
+ return value
+ },
+ 2,
+ )}
+
+
+
+
Active Chunk (ref - no live update)
+
+ {JSON.stringify(activeChunkRef.current, null, 2)}
+
+
+
+
Selection Info (ref - no live update)
+
+ {JSON.stringify(selectionInfoRef.current, null, 2)}
+
+
+
+
+
+
,
)
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 461cd0b..0060dae 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -4,7 +4,7 @@
declare namespace NodeJS {
interface ProcessEnv {
- readonly NODE_ENV: "development" | "production" | "test"
+ readonly NODE_ENV: "development" | "production"
readonly PUBLIC_URL: string
}
}
diff --git a/tsconfig.json b/tsconfig.json
index 83a0a8c..f58a6d3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,6 @@
"noEmit": false,
"jsx": "react-jsx"
},
- "include": ["src", "packages"],
+ "include": ["src"],
"exclude": ["**/build"]
}
diff --git a/vite-dev.config.ts b/vite-dev.config.ts
new file mode 100644
index 0000000..5fe6da7
--- /dev/null
+++ b/vite-dev.config.ts
@@ -0,0 +1,42 @@
+import { resolve } from "path"
+import { glob } from "glob"
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react(), libInjectCss(), dts({ outDir: "build/types" })],
+ build: {
+ outDir: "build",
+ lib: {
+ entry: glob.sync(resolve(__dirname, "src/**/!(*.d|index).{ts,tsx}")),
+ },
+ sourcemap: true,
+ rollupOptions: {
+ treeshake: true,
+ external: [
+ new RegExp("react*"),
+ new RegExp("highcharts*"),
+ new RegExp("@armco/*"),
+ "d3",
+ "uuid",
+ ],
+ output: [
+ {
+ format: "es",
+ dir: "build/es",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ {
+ format: "cjs",
+ dir: "build/cjs",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ ],
+ },
+ },
+})
diff --git a/vite-run.config.ts b/vite-run.config.ts
new file mode 100644
index 0000000..ae3d7cd
--- /dev/null
+++ b/vite-run.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ open: true,
+ },
+ build: {
+ outDir: "build",
+ sourcemap: true,
+ },
+ test: {
+ globals: true,
+ environment: "jsdom",
+ setupFiles: "src/setupTests",
+ mockReset: true,
+ },
+})
diff --git a/vite.config.ts b/vite.config.ts
index ae3d7cd..c4e83d9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,20 +1,41 @@
+import { resolve } from "path"
+import { glob } from "glob"
import { defineConfig } from "vitest/config"
import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
- server: {
- open: true,
- },
+ plugins: [react(), libInjectCss(), dts({ outDir: "build/types" })],
build: {
outDir: "build",
- sourcemap: true,
- },
- test: {
- globals: true,
- environment: "jsdom",
- setupFiles: "src/setupTests",
- mockReset: true,
+ lib: {
+ entry: glob.sync(resolve(__dirname, "src/**/!(*.d|index).{ts,tsx}")),
+ },
+ rollupOptions: {
+ treeshake: true,
+ external: [
+ new RegExp("react*"),
+ new RegExp("highcharts*"),
+ new RegExp("@armco/*"),
+ "d3",
+ "uuid",
+ ],
+ output: [
+ {
+ format: "es",
+ dir: "build/es",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ {
+ format: "cjs",
+ dir: "build/cjs",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ ],
+ },
},
})