From d8e428ee5b720f5a92f54db0c3daae141707cb02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Wed, 25 Oct 2023 12:14:08 +0200
Subject: [PATCH] [dome] rich text component draft
---
ivette/src/dome/renderer/text/richtext.tsx | 83 ++++++++++++++++++++++
ivette/src/sandbox/text.tsx | 50 +++++++++++++
2 files changed, 133 insertions(+)
create mode 100644 ivette/src/dome/renderer/text/richtext.tsx
create mode 100644 ivette/src/sandbox/text.tsx
diff --git a/ivette/src/dome/renderer/text/richtext.tsx b/ivette/src/dome/renderer/text/richtext.tsx
new file mode 100644
index 00000000000..ecea1ee55b4
--- /dev/null
+++ b/ivette/src/dome/renderer/text/richtext.tsx
@@ -0,0 +1,83 @@
+/* ************************************************************************ */
+/* */
+/* This file is part of Frama-C. */
+/* */
+/* Copyright (C) 2007-2023 */
+/* CEA (Commissariat à l'énergie atomique et aux énergies */
+/* alternatives) */
+/* */
+/* you can redistribute it and/or modify it under the terms of the GNU */
+/* Lesser General Public License as published by the Free Software */
+/* Foundation, version 2.1. */
+/* */
+/* It is distributed in the hope that it will be useful, */
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the */
+/* GNU Lesser General Public License for more details. */
+/* */
+/* See the GNU Lesser General Public License version 2.1 */
+/* for more details (enclosed in the file licenses/LGPLv2.1). */
+/* */
+/* ************************************************************************ */
+
+import React, { CSSProperties } from 'react';
+import { classes } from 'dome/misc/utils';
+import * as CS from '@codemirror/state';
+import * as CM from '@codemirror/view';
+
+/* -------------------------------------------------------------------------- */
+/* --- Basic Definitions --- */
+/* -------------------------------------------------------------------------- */
+
+export interface Range { offset: number; length: number }
+export interface Position { offset: number; line: number }
+export interface Selection extends Range { fromLine: number, toLine: number }
+
+export function byDepth(a : Range, b : Range): number
+{
+ return (a.length - b.length) || (b.offset - a.offset);
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Editor View --- */
+/* -------------------------------------------------------------------------- */
+
+function createView(parent: Element): CM.EditorView {
+ const extensions : CS.Extension[] = [
+ //CS.EditorState.readOnly.of(false),
+ ]
+ const state = CS.EditorState.create({ extensions });
+ return new CM.EditorView({ state, parent });
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Rich Text Component --- */
+/* -------------------------------------------------------------------------- */
+
+export interface RichTextProps {
+ className?: string;
+ style?: CSSProperties;
+}
+
+export function RichText(props: RichTextProps) : JSX.Element {
+ type View = CM.EditorView | null;
+ const parent = React.useRef(null);
+ const editor = React.useRef<View>(null);
+ React.useEffect(() => {
+ const div = parent.current;
+ if (!div) return;
+ const view = createView(div);
+ editor.current = view;
+ return () => {
+ editor.current = null;
+ view.destroy();
+ };
+ }, []);
+ const className = classes(
+ 'cm-global-box',
+ props.className
+ );
+ return <div className={className} style={props.style} ref={parent} />;
+}
+
+/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/sandbox/text.tsx b/ivette/src/sandbox/text.tsx
new file mode 100644
index 00000000000..95453ba7f21
--- /dev/null
+++ b/ivette/src/sandbox/text.tsx
@@ -0,0 +1,50 @@
+/* ************************************************************************ */
+/* */
+/* This file is part of Frama-C. */
+/* */
+/* Copyright (C) 2007-2023 */
+/* CEA (Commissariat à l'énergie atomique et aux énergies */
+/* alternatives) */
+/* */
+/* you can redistribute it and/or modify it under the terms of the GNU */
+/* Lesser General Public License as published by the Free Software */
+/* Foundation, version 2.1. */
+/* */
+/* It is distributed in the hope that it will be useful, */
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the */
+/* GNU Lesser General Public License for more details. */
+/* */
+/* See the GNU Lesser General Public License version 2.1 */
+/* for more details (enclosed in the file licenses/LGPLv2.1). */
+/* */
+/* ************************************************************************ */
+
+/* -------------------------------------------------------------------------- */
+/* --- Sandbox Testing of RichText --- */
+/* --- Only appears in DEVEL mode. --- */
+/* -------------------------------------------------------------------------- */
+
+import React from 'react';
+import { RichText } from 'dome/text/richtext';
+import { registerSandbox } from 'ivette';
+
+/* -------------------------------------------------------------------------- */
+/* --- Use Text --- */
+/* -------------------------------------------------------------------------- */
+
+function UseText(): JSX.Element {
+ return <RichText />;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Sandbox --- */
+/* -------------------------------------------------------------------------- */
+
+registerSandbox({
+ id: 'sandbox.richtext',
+ label: 'Rich Text',
+ children: <UseText />,
+});
+
+/* -------------------------------------------------------------------------- */
--
GitLab