Merge pull request #119 from kommitters/v1.2

Release v1.2.0

.eslintrc.js

@@ -10,4 +10,7 @@ module.exports = {
     browser: true,
     'jest/globals': true,
   },
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
 };

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Harden Runner
-      uses: step-security/harden-runner@03bee3930647ebbf994244c21ddbc0d4933aab4f # v2.3.0
+      uses: step-security/harden-runner@63c24ba6bd7ba022e95695ff85de572c04a18142 # v2.7.0
       with:
         disable-sudo: true
         egress-policy: block
@@ -25,12 +25,12 @@ jobs:
           registry.yarnpkg.com:443
           objects.githubusercontent.com:443
 
-    - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+    - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
     - name: Install modules
       run: yarn
     - name: Run tests
       run: yarn test --coverage
     - name: Coveralls
-      uses: coverallsapp/github-action@045a25193560dc194e405657f552faeb6b9433aa # v2.1.0
+      uses: coverallsapp/github-action@3dfc5567390f6fa9267c0ee9c251e4c8c3f18949 # v2.2.3
       with:
         github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/codeql.yml

@@ -41,7 +41,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@03bee3930647ebbf994244c21ddbc0d4933aab4f # v2.3.0
+        uses: step-security/harden-runner@63c24ba6bd7ba022e95695ff85de572c04a18142 # v2.7.0
         with:
           disable-sudo: true
           egress-policy: block
@@ -51,11 +51,11 @@ jobs:
             objects.githubusercontent.com:443
 
       - name: Checkout repository
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@7df0ce34898d659f95c0c4a09eaa8d4e32ee64db # v2.2.12
+        uses: github/codeql-action/init@379614612a29c9e28f31f39a59013eb8012a51f0 # v3.24.3
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -68,7 +68,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@7df0ce34898d659f95c0c4a09eaa8d4e32ee64db # v2.2.12
+        uses: github/codeql-action/autobuild@379614612a29c9e28f31f39a59013eb8012a51f0 # v3.24.3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -81,6 +81,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@7df0ce34898d659f95c0c4a09eaa8d4e32ee64db # v2.2.12
+        uses: github/codeql-action/analyze@379614612a29c9e28f31f39a59013eb8012a51f0 # v3.24.3
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/publish.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@03bee3930647ebbf994244c21ddbc0d4933aab4f # v2.3.0
+        uses: step-security/harden-runner@63c24ba6bd7ba022e95695ff85de572c04a18142 # v2.7.0
         with:
           disable-sudo: true
           egress-policy: block
@@ -19,9 +19,9 @@ jobs:
             registry.npmjs.org:443
             registry.yarnpkg.com:443
 
-      - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
           node-version: "16.x"
           registry-url: "https://registry.npmjs.org"

.github/workflows/scorecards.yml

@@ -22,7 +22,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@03bee3930647ebbf994244c21ddbc0d4933aab4f # v2.3.0
+        uses: step-security/harden-runner@63c24ba6bd7ba022e95695ff85de572c04a18142 # v2.7.0
         with:
           disable-sudo: true
           egress-policy: block
@@ -31,18 +31,18 @@ jobs:
             api.osv.dev:443
             api.securityscorecards.dev:443
             bestpractices.coreinfrastructure.org:443
-            fulcio.sigstore.dev:443
             github.com:443
-            rekor.sigstore.dev:443
-            sigstore-tuf-root.storage.googleapis.com:443
+            *.sigstore.dev:443
+            *.bestpractices.dev:443
+            *.storage.googleapis.com:443
 
       - name: "Checkout code"
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@80e868c13c90f172d68d1f4501dee99e2479f7af # v2.1.3
+        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
         with:
           results_file: results.sarif
           results_format: sarif
@@ -61,14 +61,14 @@ jobs:
       # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
       # format to the repository Actions tab.
       - name: "Upload artifact"
-        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2
+        uses: actions/upload-artifact@5d5d22a31266ced268874388b861e4b58bb5c2f3 # v4.3.1
         with:
           name: SARIF file
           path: results.sarif
           retention-days: 5
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@7df0ce34898d659f95c0c4a09eaa8d4e32ee64db # v2.2.12
+        uses: github/codeql-action/upload-sarif@379614612a29c9e28f31f39a59013eb8012a51f0 # v3.24.3
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.2.0 (19.02.2024)
+
+* Add a new optional `placeholder` configuration param to the plugin. Default value is `Add a tooltip`.
+* Update all dependencies.
+
 ## 1.1.15 (13.04.2023)
 
 * Update all dependencies.

README.md

@@ -52,8 +52,9 @@ const editor = EditorJS({
       class: Tooltip,
       config: {
         location: 'left',
-        highlightColor: '#FFEFD5',
         underline: true,
+        placeholder: 'Enter a tooltip',
+        highlightColor: '#FFEFD5',
         backgroundColor: '#154360',
         textColor: '#FDFEFE',
         holder: 'editorId',
@@ -68,14 +69,15 @@ Select some text, click on the tooltip button in the inline-tools bar, and type
 
 ## Config Params
 
-| Field          | Type      | Description                     |
-| -------------- | --------- | ------------------------------- |
-| location          | `{location: string}` | You could choose the tooltip place(top, bottom, left, right). Default value is bottom
-| highlightColor | `{ highlightColor: Hex or string }`|You could choose the background text color wrapped by the tooltip, you could pass hexadecimal colors or string colors
-| underline | `{ underline: boolean }`  | You could add underline text decoration to the text wrapped by the tooltip
-| backgroundColor | `{ backgroundColor: string }`  | You could choose the tooltip color, you could pass hexadecimal colors or string colors
-| textColor | `{ textColor: string }`  | You could choose the tooltip text color, you could pass hexadecimal colors or string colors
-| holder | `{ holder: string }`  | If your EditorJS Id passed in the Editor tag is different from 'editorjs', use the holder field.
+| Field | Type | Description |
+| -------- | -------- | -------- |
+| `location`     | String (`top`, `bottom`, `left`, `right`) | Where to place the tooltip. Default value is `bottom`. |
+| `underline`     | Boolean | Add underline text decoration to the text wrapped by the tooltip. Default is `false`. |
+| `placeholder`     | String | Placeholder text for the tooltip input. Default is 'Add a tooltip'. |
+| `highlightColor`     | String or Hexadecimal | Background color of the text wrapped by the tooltip. |
+| `backgroundColor`     | String or Hexadecimal | Background color of the tooltip container. |
+| `textColor`     | String or Hexadecimal | Text color of the tooltip. |
+| `holder`     | String | ID of the HTML element that contains the EditorJS instance. Default is 'editorjs'. |
 
 ## Output data
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "editorjs-tooltip",
-  "version": "1.1.15",
+  "version": "1.2.0",
   "keywords": [
     "tool",
     "tooltip",
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.6",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^6.0.0",
     "babel-jest": "^29.0.0",
     "babel-loader": "^9.0.0",
     "css-loader": "^6.5.1",

src/index.js

@@ -39,10 +39,11 @@ export default class Tooltip {
     const { location = 'bottom' } = config;
     this.tooltipLocation = location;
     this.highlightColor = config.highlightColor;
-    this.underline = config.underline ? config.underline : false;
+    this.underline = config.underline ?? false;
     this.backgroundColor = config.backgroundColor;
     this.textColor = config.textColor;
-    this.editorId = config.holder ? config.holder : 'editorjs';
+    this.editorId = config.holder ?? 'editorjs';
+    this.placeholder = config.placeholder ?? 'Add a tooltip';
 
     this.tag = 'SPAN';
 
@@ -271,7 +272,7 @@ export default class Tooltip {
   renderActions() {
     this.spanTooltip = this.api.selection.findParentTag(this.tag);
     this.tooltipInput = document.createElement('input');
-    this.tooltipInput.placeholder = 'Add a tooltip';
+    this.tooltipInput.placeholder = this.placeholder;
     this.tooltipInput.classList.add(this.api.styles.input);
     this.tooltipInput.classList.add(this.CSS.input);
     if (this.spanTooltip) {

test/fixtures/tooltip.js

@@ -23,8 +23,9 @@ const api = {
  */
 const config = {
   location: 'right',
-  highlightColor: 'red',
   underline: true,
+  placeholder: 'Enter a tooltip',
+  highlightColor: 'red',
   backgroundColor: 'blue',
   textColor: 'white',
   holder: 'editorjs2',
@@ -38,10 +39,10 @@ const createTooltip = (data) => new Tooltip({
   api,
 });
 
-const createTooltipRightPosition = (data) => new Tooltip({
+const createCustomizedTooltip = (data) => new Tooltip({
   data,
   api,
   config,
 });
 
-export { createTooltip, createTooltipRightPosition };
+export { createTooltip, createCustomizedTooltip };

test/tooltip.test.js

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { createTooltip, createTooltipRightPosition } from './fixtures/tooltip';
+import { createTooltip, createCustomizedTooltip } from './fixtures/tooltip';
 
 describe('Tooltip', () => {
   let tooltip;
@@ -49,17 +49,17 @@ describe('Tooltip', () => {
     });
 
     it('validates position', () => {
-      tooltip = createTooltipRightPosition();
+      tooltip = createCustomizedTooltip();
       expect(tooltip.tooltipLocation).toBe('right');
     });
 
     it('validates holder', () => {
-      tooltip = createTooltipRightPosition();
+      tooltip = createCustomizedTooltip();
       expect(tooltip.editorId).toBe('editorjs2');
     });
 
     it('validates color and underline decoration', () => {
-      tooltip = createTooltipRightPosition();
+      tooltip = createCustomizedTooltip();
 
       const title = document.getElementById('tooltip');
       const range = document.createRange();
@@ -74,5 +74,11 @@ describe('Tooltip', () => {
       expect(tooltipElement.firstChild).toHaveClass('tooltip-tool__underline');
       expect(tooltipElement.firstChild).toHaveStyle('background: red');
     });
+
+    it('validates placeholder', () => {
+      const input = createCustomizedTooltip().renderActions();
+      expect(input).toHaveClass('tooltip-tool__input');
+      expect(input.placeholder).toBe('Enter a tooltip');
+    });
   });
 });