Skip to content

Commit cc41ca2

Browse files
Codebuff Contributorgod032396-del
Codebuff Contributor
authored and
god032396-del
committed
fix: increase z-index so toolboxes render above adjacent blocks
The .tc-wrap had z-index: 0 which created a stacking context that trapped toolbox popovers behind adjacent Editor.js blocks. Increased .tc-wrap z-index to 10 and .tc-toolbox z-index to 15 so the row/column deletion popovers always appear in front of other content. Fixes #186 Signed-off-by: god032396-del <god032396@gmail.com>
0 parents  commit cc41ca2

26 files changed

Lines changed: 6186 additions & 0 deletions

‎.eslintignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
node_modules
3+
.github

‎.eslintrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": [
3+
"codex"
4+
],
5+
"rules": {
6+
"jsdoc/no-undefined-types": "off"
7+
}
8+
}

‎.github/workflows/npm-publish.yml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
name: Publish package to NPM
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
8+
jobs:
9+
publish-and-notify:
10+
uses: codex-team/github-workflows/.github/workflows/npm-publish-and-notify-reusable.yml@main
11+
secrets:
12+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
13+
CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT: ${{ secrets.CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT }}

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.idea
2+
node_modules
3+
dist

‎.npmignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.idea/
2+
assets/
3+
src/
4+
.eslintrc
5+
postcss.config.js
6+
vite.config.js
7+
test.html
8+
yarn.lock

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 CodeX
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# Table tool
2+
3+
The Table Block for the [Editor.js](https://editorjs.io). Finally improved.
4+
5+
![](assets/68747470733a2f2f636170656c6c612e706963732f34313239346365632d613262332d343135372d383339392d6666656665643364386666642e6a7067.jpeg)
6+
7+
## Installation
8+
9+
Get the package
10+
11+
```shell
12+
yarn add @editorjs/table
13+
```
14+
15+
Include module at your application
16+
17+
```javascript
18+
import Table from '@editorjs/table'
19+
```
20+
21+
Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/table@latest)
22+
23+
24+
25+
## Usage
26+
27+
Add a new Tool to the `tools` property of the Editor.js initial config.
28+
29+
```javascript
30+
import Table from '@editorjs/table';
31+
32+
var editor = EditorJS({
33+
tools: {
34+
table: Table,
35+
}
36+
});
37+
```
38+
39+
Or init the Table tool with additional settings
40+
41+
```javascript
42+
var editor = EditorJS({
43+
tools: {
44+
table: {
45+
class: Table,
46+
inlineToolbar: true,
47+
config: {
48+
rows: 2,
49+
cols: 3,
50+
maxRows: 5,
51+
maxCols: 5,
52+
},
53+
},
54+
},
55+
});
56+
```
57+
58+
## Config Params
59+
60+
| Field | Type | Description |
61+
| ------------------ | -------- | ---------------------------------------- |
62+
| `rows` | `number` | initial number of rows. `2` by default |
63+
| `cols` | `number` | initial number of columns. `2` by default |
64+
| `maxRows` | `number` | maximum number of rows. `5` by params |
65+
| `maxCols` | `number` | maximum number of columns. `5` by params |
66+
| `withHeadings` | `boolean` | toggle table headings. `false` by default |
67+
| `stretched` | `boolean` | whether the table is stretched to fill the full width of the container |
68+
69+
## Output data
70+
71+
This Tool returns `data` in the following format
72+
73+
| Field | Type | Description |
74+
| -------------- | ------------ | ----------------------------------------- |
75+
| `withHeadings` | `boolean` | Uses the first line as headings |
76+
| `stretched` | `boolean` | whether the table is stretched to fill the full width of the container |
77+
| `content` | `string[][]` | two-dimensional array with table contents |
78+
79+
```json
80+
{
81+
"type" : "table",
82+
"data" : {
83+
"withHeadings": true,
84+
"stretched": false,
85+
"content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ]
86+
}
87+
}
88+
```
89+
90+
## CSP support
91+
92+
If you're using Content Security Policy (CSP) pass a `nonce` via [`<meta property="csp-nonce" content={{ nonce }} />`](https://github.com/marco-prontera/vite-plugin-css-injected-by-js#usestrictcsp-boolean) in your document head.
93+
94+
# Support maintenance 🎖
95+
96+
If you're using this tool and editor.js in your business, please consider supporting their maintenance and evolution.
97+
98+
[http://opencollective.com/editorjs](http://opencollective.com/editorjs)
99+
100+
# About CodeX
101+
102+
<img align="right" width="120" height="120" src="https://codex.so/public/app/img/codex-logo.svg" hspace="50">
103+
104+
CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in leading technologies.
105+
106+
| 🌐 | Join 👋 | Twitter | Instagram |
107+
| -- | -- | -- | -- |
108+
| [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team) |

‎assets/68747470733a2f2f636170656c6c612e706963732f34313239346365632d613262332d343135372d383339392d6666656665643364386666642e6a7067.jpeg‎

54.1 KB
Loading

‎index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Test of a New Beautiful Table</title>
7+
8+
<style>
9+
body,
10+
html {
11+
margin: 0;
12+
font-family: Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
13+
}
14+
15+
body {
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
}
20+
21+
.block {
22+
width: 800px;
23+
margin-top: 40px;
24+
}
25+
26+
#editorjs {
27+
width: 900px;
28+
min-height: 100px;
29+
}
30+
</style>
31+
32+
</head>
33+
34+
<body>
35+
36+
<div class="block"></div>
37+
<div id="editorjs"></div>
38+
39+
<button class="save-button">Save</button>
40+
<pre class="output"></pre>
41+
42+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
43+
44+
<script type="module">
45+
import Table from './src/index'
46+
const editor = new EditorJS({
47+
autofocus: true,
48+
tools: {
49+
table: {
50+
class: Table,
51+
inlineToolbar: true,
52+
config: {
53+
withHeadings: true,
54+
maxRows: 5,
55+
maxCols: 5
56+
}
57+
}
58+
},
59+
data: {
60+
time: 1625072989362,
61+
blocks: [
62+
{
63+
id: "XXVTfnMlcE",
64+
type: "table",
65+
data: {
66+
withHeadings: true,
67+
content: [
68+
["English", "Russian", "Japanese"],
69+
["Sweet", "Сладкий", "あまい"],
70+
["Good morning", "Доброе утро", "おはようございます"]]
71+
}
72+
}
73+
],
74+
version: "2.22.1"
75+
}
76+
});
77+
78+
const saveButton = document.querySelector('.save-button');
79+
const output = document.querySelector('.output');
80+
81+
saveButton.addEventListener('click', () => {
82+
editor.save().then(savedData => {
83+
output.innerHTML = JSON.stringify(savedData, null, 4);
84+
});
85+
});
86+
</script>
87+
</body>
88+
89+
</html>

‎package.json‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "@editorjs/table",
3+
"description": "Table for Editor.js",
4+
"version": "2.4.5",
5+
"license": "MIT",
6+
"repository": "https://github.com/editor-js/table",
7+
"files": [
8+
"dist"
9+
],
10+
"main": "./dist/table.umd.js",
11+
"module": "./dist/table.mjs",
12+
"types": "./dist/index.d.ts",
13+
"exports": {
14+
".": {
15+
"import": "./dist/table.mjs",
16+
"require": "./dist/table.umd.js",
17+
"types": "./dist/index.d.ts"
18+
}
19+
},
20+
"scripts": {
21+
"dev": "vite",
22+
"build": "vite build",
23+
"lint": "eslint -c ./.eslintrc --ext .js --fix ."
24+
},
25+
"author": {
26+
"name": "CodeX Team",
27+
"email": "team@ifmo.su"
28+
},
29+
"keywords": [
30+
"codex",
31+
"codex-editor",
32+
"table",
33+
"editor.js",
34+
"editorjs"
35+
],
36+
"devDependencies": {
37+
"autoprefixer": "^9.3.1",
38+
"css-loader": "^1.0.0",
39+
"cssnano": "^4.1.7",
40+
"eslint": "^5.8.0",
41+
"eslint-config-codex": "^2.0.1",
42+
"postcss-import": "^12.0.1",
43+
"postcss-nested": "^4.1.0",
44+
"postcss-nesting": "^7.0.0",
45+
"vite": "^4.5.0",
46+
"vite-plugin-css-injected-by-js": "^3.3.0",
47+
"vite-plugin-dts": "^3.9.1",
48+
"typescript": "^5.5.4"
49+
},
50+
"dependencies": {
51+
"@codexteam/icons": "^0.0.6"
52+
}
53+
}

0 commit comments

Comments
 (0)