Merge pull request #2177 from telerik/create-vite-app

Create vite app
telerik · Apr 17, 2024 · b0c494b · b0c494b
2 parents f4e5603 + 8a2488c
commit b0c494b
Show file tree

Hide file tree

Showing 10 changed files with 5,170 additions and 81 deletions.
diff --git a/knowledge-base/add-custom-event-to-the-editor.md b/knowledge-base/add-custom-event-to-the-editor.md
@@ -35,5 +35,6 @@ The desired DOM events can be attached to the EditorView object using the [onMou
 This is an example showcasing how to attach the onColumnMenu, onBlur and onClick events:
 
 {% meta height:340 %}
+{% embed_file editor/attach-events/app.jsx preview %}
 {% embed_file editor/attach-events/main.jsx preview %}
 {% endmeta %}
diff --git a/knowledge-base/examples/.eslintrc.cjs b/knowledge-base/examples/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/knowledge-base/examples/.gitignore b/knowledge-base/examples/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/knowledge-base/examples/app.jsx b/knowledge-base/examples/app.jsx
@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+import App from './editor/attach-events/app.jsx'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
diff --git a/knowledge-base/examples/editor/attach-events/app.jsx b/knowledge-base/examples/editor/attach-events/app.jsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import { Editor, EditorTools, ProseMirror } from '@progress/kendo-react-editor';
+import { Menu, MenuItem } from '@progress/kendo-react-layout';
+import { Popup } from '@progress/kendo-react-popup';
+
+const { Bold, Italic, Underline } = EditorTools;
+
+class App extends React.Component {
+  state = { show: false }
+
+  onMount = event => {
+    return new ProseMirror.EditorView(
+      { mount: event.dom }, {
+        ...event.viewProps,
+
+        // http://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents
+        handleDOMEvents: {
+          ...(event.viewProps.handleDOMEvents || {}),
+          'contextmenu': this.onContextMenu,
+          'click': this.onContextMenuClose,
+          'blur': this.onContextMenuClose
+        }
+      }
+    );
+  }
+
+  onContextMenu = (_view, domEvent) => {
+    domEvent.preventDefault();
+
+    this.setState({
+      show: true,
+      offset: { left: domEvent.clientX + 2, top: domEvent.clientY }
+    });
+  }
+
+  onContextMenuClose = (_view, _domEvent) => {
+    if (this.state.show) {
+      this.setState({ show: false });
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <Popup show={this.state.show} offset={this.state.offset}>
+          <Menu vertical={true} style={{ display: 'inline-block' }}>
+            <MenuItem text="Item1">
+              <MenuItem text="Item1.1" />
+              <MenuItem text="Item1.2">
+                <MenuItem text="Item1.2.1" />
+                <MenuItem text="Item1.2.2" />
+              </MenuItem>
+            </MenuItem>
+            <MenuItem text="Item2">
+              <MenuItem text="Item2.1" />
+              <MenuItem text="Item2.2" />
+            </MenuItem>
+            <MenuItem text="Item3" />
+          </Menu>
+        </Popup>
+        <Editor
+          defaultEditMode="div"
+          tools={[
+            [Bold, Italic, Underline]
+          ]}
+          contentStyle={{ height: 220 }}
+          defaultContent="<p>Context menu event example</p>"
+          onMount={this.onMount}
+        />
+      </div>
+    );
+  }
+}
+
+export default App;
+
diff --git a/knowledge-base/examples/editor/attach-events/main.jsx b/knowledge-base/examples/editor/attach-events/main.jsx
@@ -1,81 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Editor, EditorTools, ProseMirror } from '@progress/kendo-react-editor';
-import { Menu, MenuItem } from '@progress/kendo-react-layout';
-import { Popup } from '@progress/kendo-react-popup';
-
-const { Bold, Italic, Underline } = EditorTools;
-
-class App extends React.Component {
-  state = { show: false }
-
-  onMount = event => {
-    return new ProseMirror.EditorView(
-      { mount: event.dom }, {
-        ...event.viewProps,
-
-        // http://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents
-        handleDOMEvents: {
-          ...(event.viewProps.handleDOMEvents || {}),
-          'contextmenu': this.onContextMenu,
-          'click': this.onContextMenuClose,
-          'blur': this.onContextMenuClose
-        }
-      }
-    );
-  }
-
-  onContextMenu = (_view, domEvent) => {
-    domEvent.preventDefault();
-
-    this.setState({
-      show: true,
-      offset: { left: domEvent.clientX + 2, top: domEvent.clientY }
-    });
-  }
-
-  onContextMenuClose = (_view, _domEvent) => {
-    if (this.state.show) {
-      this.setState({ show: false });
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        <Popup show={this.state.show} offset={this.state.offset}>
-          <Menu vertical={true} style={{ display: 'inline-block' }}>
-            <MenuItem text="Item1">
-              <MenuItem text="Item1.1" />
-              <MenuItem text="Item1.2">
-                <MenuItem text="Item1.2.1" />
-                <MenuItem text="Item1.2.2" />
-              </MenuItem>
-            </MenuItem>
-            <MenuItem text="Item2">
-              <MenuItem text="Item2.1" />
-              <MenuItem text="Item2.2" />
-            </MenuItem>
-            <MenuItem text="Item3" />
-          </Menu>
-        </Popup>
-        <Editor
-          defaultEditMode="div"
-          tools={[
-            [Bold, Italic, Underline]
-          ]}
-          contentStyle={{ height: 220 }}
-          defaultContent="<p>Context menu event example</p>"
-          onMount={this.onMount}
-        />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);
-
+import { createRoot } from 'react-dom/client';
+import App from './main.jsx'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
diff --git a/knowledge-base/examples/index.html b/knowledge-base/examples/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <link id="kendoCss" rel="stylesheet preload" as="style" type="text/css"
+          href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
+  </head>
+  <body>
+    <my-app>
+      <script type="module" src="./app.jsx"></script>
+    </my-app>
+  </body>
+</html>