Skip to content

Commit bd36318

Browse files
PekoPPTfilipKovachev
PekoPPT
authored and
filipKovachev
committed
docs(editor): add Editor with strict CSP example
1 parent e31f2f3 commit bd36318

File tree

17 files changed

+586
-0
lines changed

17 files changed

+586
-0
lines changed

‎examples/kendo-react-editor-strict-csp/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/kendo-react-editor-strict-csp/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
14+
- Configure the top-level `parserOptions` property like this:
15+
16+
```js
17+
export default tseslint.config({
18+
languageOptions: {
19+
// other options...
20+
parserOptions: {
21+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22+
tsconfigRootDir: import.meta.dirname,
23+
},
24+
},
25+
})
26+
```
27+
28+
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29+
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31+
32+
```js
33+
// eslint.config.js
34+
import react from 'eslint-plugin-react'
35+
36+
export default tseslint.config({
37+
// Set the react version
38+
settings: { react: { version: '18.3' } },
39+
plugins: {
40+
// Add the react plugin
41+
react,
42+
},
43+
rules: {
44+
// other rules...
45+
// Enable its recommended rules
46+
...react.configs.recommended.rules,
47+
...react.configs['jsx-runtime'].rules,
48+
},
49+
})
50+
```

‎examples/kendo-react-editor-strict-csp/eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎examples/kendo-react-editor-strict-csp/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="vite.svg" />
7+
<link rel="stylesheet" type="text/css" href="assets/default-ocean-blue.css" />
8+
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<meta http-equiv="Content-Security-Policy" content="default-src 'self' ; style-src-elem 'self' ; style-src 'self' ;
11+
script-src 'self' ; font-src 'self' data:; img-src 'self' data: ; " />
12+
<title>Vite + React + TS</title>
13+
</head>
14+
15+
<body>
16+
<div id="root">
17+
</div>
18+
<script type="module" src="/src/main.tsx"></script>
19+
</body>
20+
21+
</html>

‎examples/kendo-react-editor-strict-csp/package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "kendo-react-editor-strict-csp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@progress/kendo-licensing": "^1.3.5",
14+
"@progress/kendo-react-editor": "^8.3.0",
15+
"react": "^18.3.1",
16+
"react-dom": "^18.3.1"
17+
},
18+
"devDependencies": {
19+
"@eslint/js": "^9.9.0",
20+
"@types/react": "^18.3.3",
21+
"@types/react-dom": "^18.3.0",
22+
"@vitejs/plugin-react": "^4.3.1",
23+
"eslint": "^9.9.0",
24+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
25+
"eslint-plugin-react-refresh": "^0.4.9",
26+
"globals": "^15.9.0",
27+
"typescript": "^5.5.3",
28+
"typescript-eslint": "^8.0.1",
29+
"vite": "^5.4.1"
30+
}
31+
}

‎examples/kendo-react-editor-strict-csp/public/assets/default-ocean-blue.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/kendo-react-editor-strict-csp/public/assets/defaultStyle.css‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
html, body {
2+
margin: 0;
3+
height: 100%;
4+
padding: 0;
5+
}
6+
7+
html {
8+
min-height: 100%;
9+
}
10+
11+
body {
12+
box-sizing: border-box;
13+
position: relative;
14+
word-wrap: break-word;
15+
padding: 8px;
16+
}
17+
18+
body > .k-content {
19+
outline: 0;
20+
height: 100%;
21+
white-space: pre-wrap;
22+
}
23+
24+
.k-content > p {
25+
margin: 0 0 1em;
26+
}
27+
28+
.k-content table {
29+
white-space: pre-wrap;
30+
}
31+
32+
.k-content .k-text-selected, .k-content::selection {
33+
color: HighlightText;
34+
background-color: Highlight;
35+
}
36+
37+
.k-content .k-text-highlighted {
38+
background-color: #bbdefb;
39+
}
40+
41+
.k-content .ProseMirror-selectednode {
42+
outline: 2px solid #8cf;
43+
}
44+
45+
.ProseMirror-hideselection *::selection { background: transparent; }
46+
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
47+
.ProseMirror-hideselection { caret-color: transparent; }
48+
49+
.ProseMirror-gapcursor {
50+
display: none;
51+
pointer-events: none;
52+
position: absolute;
53+
}
54+
55+
.ProseMirror-gapcursor:after {
56+
content: "";
57+
display: block;
58+
position: absolute;
59+
top: -2px;
60+
width: 20px;
61+
border-top: 1px solid black;
62+
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
63+
}
64+
65+
@keyframes ProseMirror-cursor-blink {
66+
to {
67+
visibility: hidden;
68+
}
69+
}
70+
71+
.ProseMirror-focused .ProseMirror-gapcursor {
72+
display: block;
73+
}
74+
75+
.k-editor-resize-handles-wrapper {
76+
position: absolute;
77+
visibility: hidden;
78+
}
79+
80+
.k-editor-resize-handle {
81+
position: absolute;
82+
visibility: visible;
83+
background-color: #fff;
84+
border: 1px solid #000;
85+
z-index: 100;
86+
width: 5px;
87+
height: 5px;
88+
}
89+
90+
.k-editor-resize-handle.northwest {
91+
top: 0;
92+
left: 0;
93+
transform: translate(-50%, -50%);
94+
cursor: nw-resize;
95+
}
96+
97+
.k-editor-resize-handle.north {
98+
top: 0;
99+
left: 50%;
100+
transform: translate(-50%, -50%);
101+
cursor: n-resize;
102+
}
103+
104+
.k-editor-resize-handle.northeast {
105+
top: 0;
106+
right: 0;
107+
transform: translate(50%, -50%);
108+
cursor: ne-resize;
109+
}
110+
111+
.k-editor-resize-handle.southwest {
112+
left: 0;
113+
bottom: 0;
114+
transform: translate(-50%, 50%);
115+
cursor: sw-resize;
116+
}
117+
118+
.k-editor-resize-handle.south {
119+
bottom: 0;
120+
left: 50%;
121+
transform: translate(-50%, 50%);
122+
cursor: s-resize;
123+
}
124+
125+
.k-editor-resize-handle.southeast {
126+
right: 0;
127+
bottom: 0;
128+
transform: translate(50%, 50%);
129+
cursor: se-resize;
130+
}
131+
132+
.k-editor-resize-handle.west {
133+
top: 50%;
134+
left: 0;
135+
transform: translate(-50%, -50%);
136+
cursor: w-resize;
137+
}
138+
139+
.k-editor-resize-handle.east {
140+
top: 50%;
141+
right: 0;
142+
transform: translate(50%, -50%);
143+
cursor: e-resize;
144+
}
145+
146+
.k-editor-resize-wrap-element {
147+
display: inline-block;
148+
position: relative;
149+
}
150+
151+
.ProseMirror .row-resize-handle {
152+
position: absolute;
153+
right: 0; left: 0; bottom: 0;
154+
transform: translate(0, 50%);
155+
height: 4px;
156+
z-index: 20;
157+
background-color: #adf;
158+
pointer-events: none;
159+
}
160+
161+
.ProseMirror .column-resize-handle {
162+
position: absolute;
163+
right: -2px; top: 0; bottom: 0;
164+
width: 4px;
165+
z-index: 20;
166+
background-color: #adf;
167+
pointer-events: none;
168+
}
169+
170+
.ProseMirror.resize-cursor {
171+
cursor: ew-resize;
172+
cursor: col-resize;
173+
}
174+
175+
.ProseMirror.resize-cursor-vertical {
176+
cursor: sn-resize;
177+
cursor: row-resize;
178+
}
179+
180+
.k-editor-resize-wrap-element table td p,
181+
.k-editor-resize-wrap-element table th p {
182+
margin: 0 auto;
183+
}

‎examples/kendo-react-editor-strict-csp/public/assets/rtlStyles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
direction: rtl
3+
}

‎examples/kendo-react-editor-strict-csp/public/assets/tablesStyle.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.ProseMirror .tableWrapper {
2+
overflow-x: auto;
3+
margin: 1em 0;
4+
}
5+
6+
.ProseMirror table {
7+
margin: 0;
8+
border-collapse: collapse;
9+
table-layout: fixed;
10+
width: 100%;
11+
overflow: hidden;
12+
}
13+
14+
.ProseMirror td, .ProseMirror th {
15+
min-width: 1em;
16+
border: 1px solid #ddd;
17+
padding: 3px 5px;
18+
vertical-align: top;
19+
box-sizing: border-box;
20+
position: relative;
21+
}
22+
23+
.ProseMirror th {
24+
font-weight: bold;
25+
text-align: left;
26+
}
27+
28+
/* Give selected cells a blue overlay */
29+
.ProseMirror .selectedCell:after {
30+
z-index: 2;
31+
position: absolute;
32+
content: "";
33+
left: 0; right: 0; top: 0; bottom: 0;
34+
background: rgba(200, 200, 255, 0.4);
35+
pointer-events: none;
36+
}

‎examples/kendo-react-editor-strict-csp/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)