recogito / recogito-js Goto Github PK

View Code? Open in Web Editor NEW

339.0 12.0 37.0 2.83 MB

A JavaScript library for text annotation

License: BSD 3-Clause "New" or "Revised" License

HTML 14.15% JavaScript 82.61% SCSS 3.20% Shell 0.04%

annotation text-annotation annotation-tool

recogito-js's People

Contributors

Stargazers

Watchers

recogito-js's Issues

Possibility to add headers for .loadAnnotations?

We use JWT auth for our apps authentication, and all requests must have a Authorization header.

Would this be ok?

loadAnnotations = (url, headers) => fetch(url, headers) .then(response => response.json()).then(annotations => { this.setAnnotations(annotations); return annotations; });

One of the major limitations of the original code: all annotations are rendered at load-time. Heavily annotated pages (2000+ annotations) have been causing problems. This lib could be an opportunity to implement lazy loading right from the start.

(Migrated from https://github.com/pelagios/recogito-text-js/issues/3)

Choose annotatable items, not all wrapped items

I have a container of elements, and I only want to be able to annotate only some of those elements in the container:

<div id="annotatable-container">
    <div id="content-0">
        <h5>don't want to annotate</h5>
        <span class="annotatable">want to annotate</span>
    </div>
    <div id="content-1">
        <h5>don't want to annotate</h5>
        <span class="annotatable">want to annotate</span>
    </div>
    ...
</div>

Initialization:

const el = document.getElementById('annotatable-container')
const r = new Recogito({content: el})

How would I go about only enabling annotation of elements with annotatable class?

retrieving word IDs from highlighted text?

My text looks like this in the browser:
So chearful and sprightly, she ...

and like this in the source:

<w xml:id="peh89-239170">So</w>
<c> </c>
<w xml:id="peh89-239180">chearful</w>
<c> </c>
<w xml:id="peh89-239190">and</w>
<c> </c>
<w xml:id="peh89-239200">sprightly</w>
<pc xml:id="peh89-239210">,</pc>
<c> </c>
<w xml:id="peh89-239220">she</w>

When I highlight the above line in the browser, can I retrieve
"target": [peh89-239170, peh89-239180, peh89-239190, peh89-239200, peh89-239210, peh89-239220]
or something to that effect? Thanks!

Tagged annotations cannot be deleted

This issue can be reproduced by visiting the demo, creating a new annotation with one or more tags, and then attempting to delete the annotation. Rather than remove the whole annotation, only the comment is removed and tags are kept in an empty annotation. Alternatively, one can also attempt to delete the 'Troy' premade annotation for the same results.

Changing readOnly doesn't affect relationship mode

Not covered by PR #54 yet.

Uncaught DOMException: Failed to execute 'setEnd' on 'Range': The offset [...] is invalid

Seems to occurs on tag boundaries. Investigate!

Unknown file extension ".css"

I'm probably doing something wrong with this, but I copied and pasted the three lines of code from the readme into an index.js:

import { Recogito } from '@recogito/recogito-js';
import '@recogito/recogito-js/dist/recogito.min.css';
const r = new Recogito({ content: 'my-content' });

But running it with node index.js complains: Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

So I rename it to index.mjs and run node index.mjs, and get: Unknown file extension ".css" for /home/jon/Code/recogito-test/node_modules/@recogito/recogito-js/dist/recogito.min.css

I figure there's some additional configuration needed to the node/npm project, that's not included in the readme?

Draw straight lines for relations

Hello,
we are integrating recogito-js into an annotation editor. Right now, we we want to annotate word alignment. Vanilla recogit-js gets us almost there, but the problem is that the relation paths are overlapping. One solution could be to draw them straight instead of the otherweise nice looking jagged path. Can you give us a hint what we need to change in the code for this? Would you be interested in us opening a PR for this?

Something like

That image is from a visualizer which has sadly no annotation capabilities.
I suppose that is a bit of a use case that is not directly intended with recogito-js, but it would work for us very well.

Raise error when double clicking at the end of the paragraph

Error in console:

Uncaught DOMException: Failed to execute 'setEnd' on 'Range': There is no child at offset 574.

This happens when I double click at the end of the paragraph (the circle in the image below)

It seems not the same problem with #61 , as the exception raises from "textNodesBetween":

cross selection support

As the title suggests，I modified the following functions。

publish module with standalone bundle

when using recogito-js via npm, developers will have to provide all the build/webpack tooling by themselves when loading the annotation editor via import {init} from '@recogito/recogito-js. this entails modules like node-sass—yet the developers' tooling might be entirely different.

i propose to use the prepare or prepublishOnly npm scripts (https://docs.npmjs.com/misc/scripts#prepublish-and-prepare) in order to ensure that each published version of this library contains the standalone build as well. subsequently, developers could load it via e.g. import {init} from '@recogito/recogito-js/dist/recogito.js while being independent in their own technology stack (being it react, vue, svelte, sass, css-in-js, etc.).

the same could be applied to the client core library (https://github.com/recogito/recogito-client-core). some best practices on publishing react components recommend on pointing the main field of the package.json manifest to the standalone build and against publishing the sources at all.

alternatively, one can currently use the build files from each github release, but this entails managing bundles directly without npm...

Event for selection

It's possible to intercept when the text is selected?

I would like to change from opening the annotation popup on selection to show a different popup to ask if i want to add a annotation or just highlight it.

readOnly flag does not seem to take effect

The readOnly does not make any difference in this code snippet

Recogito.init({content: document.getElementById('textfield'), readOnly: true });

Any idea what's wrong?

How make `recogito-js` working with an `Electron-React-Typescript-Webpack` app ?

I'm trying to use recogito-js within my Electron-React-Typescript-Webpack app.
Since I set for security reasons

  nodeIntegration: false,
  enableRemoteModule: false,
  contextIsolation: true,
  nodeIntegrationInWorker: false,
  nodeIntegrationInSubFrames: false,
  sandbox: true,
  webSecurity: true,
  webviewTag: false,

I cannot use import nor 'requirewithin anHTML` page.

So, two possibilities left:

directly import the <script> tag
use the bundler Webpack in order make to "convert" the recogito-js code into something the renderer can understand.

I imported and unzipped recogito-js-1.0.0.zip in the subfolder of the html page,
but both:

<script src="./recogito.min.js"></script>
<script src="./recogito.min.css"></script>

and

<script src="recogito.min.js"></script>
<script src="recogito.min.css"></script>

give: Failed to load resource: net::ERR_FILE_NOT_FOUND

What should I add / modify in my webpack.config.js, in order to make my Electron app recognise and use `recognito-js?.

This is my webpack configuration:

const path = require('path');
const cwd = process.cwd();
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

function srcPaths(src) {
  return path.join(__dirname, src);
}

// Creates Webpack Aliases using CWD path
const createWebpackAliases = (als) => {
  const result = {};
  for (const name in als) {
    result[name] = path.join(cwd, als[name]);
  }
  return result;
};

const aliases = createWebpackAliases({
  '@src': 'src',
  '@app': 'src/app',
  '@app_A': 'src/app_A',
  '@app_trial': 'src/lib/pdfjs-dist/web',
  '@about': 'src/sections/about',
  '@account': 'src/sections/Account/account',
  '@static': 'src/static',
  '@pdfviewer': 'src/lib/pdfjs-dist/web/viewer',
});

const isEnvProduction = process.env.NODE_ENV === 'production';
const isEnvDevelopment = process.env.NODE_ENV === 'development';

  // main process
var main_config = {
     mode: isEnvProduction ? 'production' : 'development',
    entry: './src/main/main.ts',
    target: 'electron-main',
    resolve: {
      extensions: ['.jsx', '.js', 'ts'],
    },
    // https://github.com/slackapi/node-slack-sdk/issues/746#issuecomment-778804407
    externals: [
      {
        'utf-8-validate': 'commonjs utf-8-validate',
        bufferutil: 'commonjs bufferutil',
      }
    ],
    module: {
      rules: [
        {
          test: /\.ts$/,
          include: /src/,
          use: [{ loader: 'ts-loader' }]
        },
        {
          // css files
          test: /\.(sass|less|css)$/i,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'less-loader',
            },
          ],
        },
      ]
    },
    output: {
       path: __dirname + '/dist',
      filename: 'main.js'
    },
    node: {
      __dirname: false,
      __filename: false
    },
};

  // renderer process
var renderer_config =  {
    mode: isEnvProduction ? 'production' : 'development',
    entry: {
      app: './src/app/index.tsx',
      app_A: './src/app_A/index_A.tsx',
      app_B: './src/app_B/index_B.tsx',
      infoBasket: './src/app/sections/infobasket/Infobasket.tsx',
      style: './src/app/styles/index.css',
      style_A: './src/app_A/styles/index.css',
    },
    target: 'electron-renderer',
    resolve: {
      extensions: ['.jsx', '.js', '.tsx', '.ts'],
      alias: {
        // Custom Aliases
        ...aliases,
      },
    },
    output: {
      path: __dirname + '/dist/',
      filename: '[name].js',
    },
    // https://github.com/slackapi/node-slack-sdk/issues/746#issuecomment-778804407
    externals: [
      {
        'utf-8-validate': 'commonjs utf-8-validate',
        bufferutil: 'commonjs bufferutil',
      },
    ],
    module: {
      rules: [
        {
          test: /\.(js|ts)x?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          // css files
          test: /\.css$/i,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader'
            },
          ],
        },
        {
          // Font files
          test: /\.(woff|woff2|ttf|otf)$/,
          loader: 'file-loader',
          options: {
            name: '[hash].[ext]',
            outputPath: 'dist/assets/css/'
          }
        },
        {
          // image files
          test: /\.(jpe?g|png|gif|svg)$/i,
          loader: 'file-loader',
          options: {
            name: '/pics/[name].[ext]',
            outputPath: 'dist/assets/pics/'
          }
        }
      ],
    },
    node: {
      __dirname: false,
     __filename: false
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/app/index.html',
        inject:'body',
        chunks: ['app'],
      }),
      new HtmlWebpackPlugin({
        filename: 'index_A.html',
        template: './src/app_A/index_A.html',
        inject: 'body',
        chunks: ['app_A']
      }),
      new HtmlWebpackPlugin({
        filename: 'viewer.html',
        template: './src/lib/pdfjs-dist/web/viewer.html',
        inject: 'body',
        chunks: ['app_viewer']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_trial.html',
        template: './src/app_A/index_trial.html',
        inject: 'body',
        chunks: ['index_trial']
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
        linkType: 'text/css',
      }),
      new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "./src/lib"),
            to: path.resolve(__dirname, "./dist/lib")
          },
          {
            from: path.resolve(__dirname, "./src/assets/css"),
            to: path.resolve(__dirname, "./dist/assets/css")
          },
          {
            from: path.resolve(__dirname, "./src/assets/pics"),
            to: path.resolve(__dirname, "./dist/assets/pics")
          }
        ],
        options: {
          concurrency: 100,
        },
      }),
    ]
}

module.exports = [ main_config, renderer_config ];

Looking forward to your kind help.

Creating 'perfect overlap' shouldn't be possible

At the moment, it's possible to create an annotation that perfectly overlaps an already existing one, leading to stratification. In the old Recogito, this wasn't possible: creating a perfectly overlapping annotation would discard the selection and open the existing annotation instead, allow the user to add/edit.

Port this feature to RecogitoJS.

Ability to work only with TextPositionSelector and without TextQuoteSelector

I would like to be able to use RecogitoJS without having to send a TextQuoteSelector which would create a lot of unnecessary data between client and server especially for long ranges. If there is a TextPositionSelector, it should be enough. Unfortunately, the current code won't work without a TextQuoteSelector:

Custom component

Is there the possibility to use custom component (such as a combo-box) instead of text area when adding a new annotation?
Thanks!

Annotation does not point to the selected text when multiple comments are added

I'm having an issue with the position of the Annotation popover when I add multiple comments which exceed the length of the page. In the following image, the highlighted text is the one for which annotations are added:

When I add a Recogito annotation for the same, after multiple comments this is how it shows up:

What I was expecting to see was the behaviour as shown in the online demo put up here:
https://recogito.github.io/recogito-js/

Here the pointer always points to the selected text and the page itself scrolls (notice the scrollbars on the right side) to reveal the compete annotation thread.

I inspected the demo app's folder and it appears to be using an old version of Recogito JS (which has just the min.js exported, there is no css export as present in the latest versions). I'm not sure which version it is, but if I check the releases page, its in the format of some initial versions, where in by default it adds comment and tag and there is no plugin widget concept.

@rsimon
Can you please help me fix this?

I have hosted my changes here:
https://srinidhirao.github.io/

When the page loads, select a text on the last line to add an annotation.
Keep adding annotations on the same selected text till the point of time when the height of the widget is exceeds the browser window height.
When it exceeds the height of the page, you will notice that the pointer on the widget does not point to the selected text and annotation widget just displays in the center of the page.

I18N

Enable the host app to control localization, through a config prop locale, allowing either the 2-character ISO code, or auto to use the browser setting.

Using Recogito with multiple elements on page

We use Recogito with multiple elements (1 to 6 divs) on a single page. Suddenly we've encountered a strange issue: when we render the annotations to one element, they get removed from the other elements.

We use v. 1.5.3 but even downgrading to 1.4.5 didn't help. Do you have an idea of what could cause this? Is there any document-wide "clear annotation spans" -type function that could cause the behaviour?

EDIT: I found the reason from Highlighter.js @ clear(). Would a small fix like this be ok for a PR?:

const allAnnotationSpans = Array.from(this.el.querySelectorAll('.r6o-annotation'));

Resource ID/source

Hi! As far as I know, RecogitoJS currently does not support specifying and identifier for the annotated resource. While trying to integrate a general purpose annotation server with RecogitoJS, these identifiers become crucial for filtering annotations from a LDP annotation container.

The Web Annotation Data Model specification states in regard to target selector sources:

The relationship between a Specific Resource and the resource that it is a more specific representation of.
There must be exactly 1 source relationship associated with a Specific Resource. The source resource may be described in detail, as defined above, or be just the resource's IRI.

So, to be compliant with the WADM, RecogitoJS should possibly adhere to that requirement and add a source field to the target object. However, I imagine it being difficult to realise it with the current API design, as RecogitoJS selects only a DOM fragment.

For now, it should suffice to provide the target source externally from RecogitoJS (e.g., during the createAnnotation event). I can however imagine a versatile text referencing mechanism being built into RecogitoJS: One that can annotate textual parts of a HTML document, but reference the annotation selection globally within the document IRI.

Maybe the following best practices report can be of help. I'd be happy to give this some further thought! https://www.w3.org/TR/fragid-best-practices/

P.S.: I just stumbled upon §4.2.9 "Refinement of Selection", which relates to the above issue. Multiple selectors can be combined to refine the selection: https://www.w3.org/TR/annotation-model/#refinement-of-selection

ERROR in ./node_modules/@recogito/recogito-js/dist/recogito.min.css

(base) raphy@pc:~/ForgeRaphyTemplate$ yarn start
yarn run v1.22.18
warning package.json: License should be a valid SPDX license expression
$ electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 4 / 4
✔ Compiling Main Process Code
✔ Launch Dev Servers
⠦ Compiling Renderer CodeIssues checking in progress...
⠧ Compiling Renderer CodeIssues checking in progress...
✔ Compiling Preload Scripts
⠦ Compiling Renderer CodeIssues checking in progress...
✔ Launching Application


Webpack Output Available: http://localhost:9000

⠇ Compiling Renderer CodeNo issues found.
square.area:  100
mynewinstance:  MyNewClass {}
/home/raphy/ForgeRaphyTemplate/.webpack/main/preload/preload.js
⠋ Compiling Renderer Code[71199:0602/185610.287706:ERROR:sandbox_linux.cc(377)] InitializeSandbox() called with multiple threads in process gpu-process.
assets by path window_type_b/ 3.5 MiB
  asset window_type_b/index.js 3.49 MiB [emitted] (name: window_type_b)
  asset window_type_b/index.html 954 bytes [emitted]
assets by path main_window/ 871 KiB
  asset main_window/index.js 870 KiB [emitted] (name: main_window)
  asset main_window/index.html 262 bytes [emitted]
assets by path window_type_a/ 779 KiB
  asset window_type_a/index.js 778 KiB [emitted] (name: window_type_a)
  asset window_type_a/index.html 697 bytes [emitted]
asset index.html 211 bytes [emitted]
runtime modules 101 KiB 52 modules
orphan modules 39 bytes [orphan] 1 module
modules by path ./node_modules/ 1.17 MiB 165 modules
modules by path ./src/ 30.9 KiB
  modules by path ./src/app/ 1.31 KiB 2 modules
  modules by path ./src/app_A/ 2.24 KiB
    ./src/app_A/renderer_A.ts 1020 bytes [built] [code generated]
    ./src/app_A/components/App_A.tsx 1.24 KiB [built] [code generated]
  modules by path ./src/app_B/ 7.55 KiB
    ./src/app_B/renderer_B.ts 1020 bytes [built] [code generated]
    ./src/app_B/components/App_B.tsx 6.55 KiB [built] [code generated]
  modules by path ./src/assets/css/postcss/*.pcss 19.8 KiB
    ./src/assets/css/postcss/app.pcss 2.56 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/assets/css/postcss/app.pcss 17.2 KiB [built] [code generated]

ERROR in ./node_modules/@recogito/recogito-js/dist/recogito.min.css (./node_modules/@recogito/recogito-js/dist/recogito.min.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/@recogito/recogito-js/dist/recogito.min.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";
 @ ./node_modules/@recogito/recogito-js/dist/recogito.min.css
 @ ./src/app_B/components/App_B.tsx 3:0-53
 @ ./src/app_B/renderer_B.ts 30:0-28

ERROR in ./node_modules/@recogito/recogito-js/dist/recogito.min.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3349:32
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Cache.js:107:20)
    at ItemCacheFacade.store (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/CacheFacade.js:137:15)
-- inner error --
Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at Object.<anonymous> (/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css:1:7)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5057:39
    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3349:32

Generated code for /home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css
1 | throw new Error("Module build failed (from ./node_modules/css-loader/dist/cjs.js):\nCssSyntaxError\n\n(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word\n\n \u001b[90m 1 | \u001b[39m\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 2 | \u001b[39m      import API from \u001b[32m\"!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m   | \u001b[39m      \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 3 | \u001b[39m      import domAPI from \u001b[32m\"!../../../style-loader/dist/runtime/styleDomAPI.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 4 | \u001b[39m      import insertFn from \u001b[32m\"!../../../style-loader/dist/runtime/insertBySelector.js\"\u001b[39m\u001b[33m;\u001b[39m\n");
 @ ./src/app_B/components/App_B.tsx 3:0-53
 @ ./src/app_B/renderer_B.ts 30:0-28

webpack 5.73.0 compiled with 2 errors in 7984 ms
✖ Compiling Renderer Code

Electron Forge was terminated:
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";
,ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3349:32
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Cache.js:107:20)
    at ItemCacheFacade.store (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/CacheFacade.js:137:15)
-- inner error --
Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at Object.<anonymous> (/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css:1:7)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5057:39
    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3349:32

Generated code for /home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css
1 | throw new Error("Module build failed (from ./node_modules/css-loader/dist/cjs.js):\nCssSyntaxError\n\n(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word\n\n \u001b[90m 1 | \u001b[39m\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 2 | \u001b[39m      import API from \u001b[32m\"!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m   | \u001b[39m      \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 3 | \u001b[39m      import domAPI from \u001b[32m\"!../../../style-loader/dist/runtime/styleDomAPI.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 4 | \u001b[39m      import insertFn from \u001b[32m\"!../../../style-loader/dist/runtime/insertBySelector.js\"\u001b[39m\u001b[33m;\u001b[39m\n");
No issues found.
No issues found.
No issues found.
⠙ Compiling Renderer CodeNo issues found.
No issues found.
No issues found.
⠼ Compiling Renderer Codeassets by info 2.63 KiB [immutable]
  assets by path *.js 2.53 KiB 3 assets
  assets by path *.json 109 bytes
    asset window_type_a.97d28373618655bc7ade.hot-update.json 37 bytes [emitted] [immutable] [hmr]
    + 2 assets
assets by path window_type_b/ 3.5 MiB
  asset window_type_b/index.js 3.49 MiB [emitted] (name: window_type_b)
  asset window_type_b/index.html 954 bytes [emitted]
assets by path main_window/ 870 KiB
  asset main_window/index.js 870 KiB [emitted] (name: main_window)
  asset main_window/index.html 262 bytes [emitted]
assets by path window_type_a/ 779 KiB
  asset window_type_a/index.js 778 KiB [emitted] (name: window_type_a)
  asset window_type_a/index.html 697 bytes [emitted]
asset index.html 211 bytes [emitted]
Entrypoint main_window 871 KiB = main_window/index.js 870 KiB main_window.97d28373618655bc7ade.hot-update.js 861 bytes
Entrypoint window_type_a 779 KiB = window_type_a/index.js 778 KiB window_type_a.97d28373618655bc7ade.hot-update.js 863 bytes
Entrypoint window_type_b 3.5 MiB = window_type_b/index.js 3.49 MiB window_type_b.97d28373618655bc7ade.hot-update.js 863 bytes
cached modules 1.19 MiB (javascript) 12.1 KiB (runtime) [cached] 175 modules
runtime modules 88.1 KiB 48 modules
orphan modules 39 bytes [orphan] 1 module
javascript modules 17.2 KiB
  ./node_modules/@recogito/recogito-js/dist/recogito.min.css 39 bytes [built] [1 error]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/assets/css/postcss/app.pcss 17.2 KiB [built]

ERROR in ./node_modules/@recogito/recogito-js/dist/recogito.min.css (./node_modules/@recogito/recogito-js/dist/recogito.min.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/@recogito/recogito-js/dist/recogito.min.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";
 @ ./node_modules/@recogito/recogito-js/dist/recogito.min.css
 @ ./src/app_B/components/App_B.tsx 3:0-53
 @ ./src/app_B/renderer_B.ts 30:0-28

ERROR in ./node_modules/@recogito/recogito-js/dist/recogito.min.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3351:5
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/CacheFacade.js:111:15)
-- inner error --
Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at Object.<anonymous> (/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css:1:7)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5057:39
    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3351:5

Generated code for /home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css
1 | throw new Error("Module build failed (from ./node_modules/css-loader/dist/cjs.js):\nCssSyntaxError\n\n(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word\n\n \u001b[90m 1 | \u001b[39m\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 2 | \u001b[39m      import API from \u001b[32m\"!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m   | \u001b[39m      \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 3 | \u001b[39m      import domAPI from \u001b[32m\"!../../../style-loader/dist/runtime/styleDomAPI.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 4 | \u001b[39m      import insertFn from \u001b[32m\"!../../../style-loader/dist/runtime/insertBySelector.js\"\u001b[39m\u001b[33m;\u001b[39m\n");
 @ ./src/app_B/components/App_B.tsx 3:0-53
 @ ./src/app_B/renderer_B.ts 30:0-28

webpack 5.73.0 compiled with 2 errors in 677 ms
✖ Compiling Renderer Code

Electron Forge was terminated:
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";
,ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3351:5
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/CacheFacade.js:111:15)
-- inner error --
Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";

    at Object.<anonymous> (/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css:1:7)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval (eval at create (/home/raphy/ForgeRaphyTemplate/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5057:39
    at tryRunOrWebpackError (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5055:12)
    at __webpack_require__ (/home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5012:18)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:5083:20
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3463:5)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4955:16
    at symbolIterator (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3485:9)
    at done (/home/raphy/ForgeRaphyTemplate/node_modules/neo-async/async.js:3527:9)
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:4870:8
    at /home/raphy/ForgeRaphyTemplate/node_modules/webpack/lib/Compilation.js:3351:5

Generated code for /home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/style-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/css-loader/dist/cjs.js!/home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css
1 | throw new Error("Module build failed (from ./node_modules/css-loader/dist/cjs.js):\nCssSyntaxError\n\n(2:7) /home/raphy/ForgeRaphyTemplate/node_modules/@recogito/recogito-js/dist/recogito.min.css Unknown word\n\n \u001b[90m 1 | \u001b[39m\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 2 | \u001b[39m      import API from \u001b[32m\"!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m   | \u001b[39m      \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 3 | \u001b[39m      import domAPI from \u001b[32m\"!../../../style-loader/dist/runtime/styleDomAPI.js\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 4 | \u001b[39m      import insertFn from \u001b[32m\"!../../../style-loader/dist/runtime/insertBySelector.js\"\u001b[39m\u001b[33m;\u001b[39m\n");
No issues found.
Done in 375.40s.
(base) raphy@pc:~/ForgeRaphyTemplate$

I'm importing recogito as follows:

import { Recogito } from '@recogito/recogito-js';
import '@recogito/recogito-js/dist/recogito.min.css';

These are the wepack configuration files :

webpack.rules.js :

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = [
  // Add support for native node modules
  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules\/.+\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
  {
    test: /\.ts$/,
    include: /src/,
    use: [{ loader: 'ts-loader' }]
  },
  // https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
  {
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader, "css-loader", "style-loader"],
  },
  {
    test: /\.pcss$/,
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader'
      },
      { // https://github.com/webpack-contrib/postcss-loader#getting-started
           loader: 'postcss-loader',
           options: {
                postcssOptions: {
                  plugins: [
                    "postcss-preset-env",
                  ],
                },
                //sourceMap: true,
            },
      },
    ],
  }   
];

webpack.plugins.js :

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin")
const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = [
  new ForkTsCheckerWebpackPlugin(),
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/app/index.html',
    inject:'body',
    chunks: ['app'],
  }),
  // https://github.com/webpack-contrib/mini-css-extract-plugin#recommended
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // all options are optional
  filename: "[name].css",
    chunkFilename: "[id].css",
    ignoreOrder: false, // Enable to remove warnings about conflicting order
  }),
];

webpack.renderer.config.js :

const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});


module.exports = {
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
};

Other info:

"@recogito/annotorious": "2.3.3",
"@recogito/recogito-js": "1.0.0",
node: v16.15.0
O.S. : Ubuntu 20.04 Desktop

How to make it work?

Headless mode

Excellent, thanks:

For instance, we disabled the annotation textbox popup as we have our own.

Great! It's actuallly planned to become available as a standard feature ("headless mode"). But it's only implemented in Annotorious so far (see here for an intro). It will be great to (finally) have the same functionality in RecogitoJS, too.

Originally posted by @rsimon in #23 (comment)

How to save?

Hey

great Idea to offer the possibility to make comments on websites like in PDFs!

I tried this demo: https://github.com/recogito/recogito-js/tree/gh-pages,
but my annotiations will not be saved in the .json file.

What is my mistake?

Complating half selection

Is is possible to extend selection start and end offset when user just mark middle of the word or few words.
Some thing like:

"This is example sentence cont[ains an anno]tation"
User select just "ains an anno" part but after onclick fired? selection will extend to "contains an annotation"

Issue when DOM gets modified / restored

The page to which we are trying to integrate recogito-js has content organized in tabs. When the page loads the first time and some comments are loaded and the annotations are displayed properly. The recogito-js is initialised by attaching to the main div for this.

Subsequently let's assume user navigates to a different tab and back to tab 1, no annotations are shown. I guess this is due to the fact that the components annotated were destroyed when the tab navigation happened and restored when the tab was recreated. For testing, I added code to reload the comments when the tab 1 is recreated and shown. Now the annotation is shown but not all annotations are shown and its not shown in the right place.

Any idea about this? In general how to reload comments/annotations in case the DOM tree has changed?

Using Recogito JS with SVGS?

Has anyone ever used this library with SVGs? When highlighting elements in an SVG, the highlighted span tag gets added within the element but the text disappears.

<text x="462.4" y="283.6" class="sd_20"><span class="r6o-annotation" data-id="#2a6141ed-da41-485e-975f-c2077b3f667c">Generally </span></text>

I tried changing the <span> tags to <tspan> tags dynamically after creating an annotation but still had the same issue.

R wrapper

FYI. I've made a htmlwidget R wrapper at https://github.com/DIGI-VUB/recogito
Thanks for the software.

.setAnnotations doesn't clear existing ones

.setAnnotations should re-init the annotation canvas. However, it currently doesn't clear the existing annotations.

Ability to create relations / select relations without having to switch to "relation" mode

It would be great if there was a way to select relations and to create relations without having to switch the the "relations" mode before. I.e. the ability to create span annotations and relation annotations without mode-switching.

Optimally, I believe there would be some handle on the spans which can be used to create a relation be clicking on the handle and then dragging it to the target.

An alternative could be to involve a key-press. E.g. when shift-clicking on a span and then dragging the mouse, that this would initiate the creation of a relation.

Exception if an annotation has no TextQuoteSelector

The quote() method throws an exception if an annotation has no TextQuoteSelector. That is probably fine, but does SelectionUtils.getExactOverlaps have to use the quote really?

/**
 * Util function that checks if the given selection is an exact overlap to any
 * existing annotations, and returns them, if so
 */
export const getExactOverlaps = (newAnnotation, selectedSpans) => {
  // All existing annotations at this point
  const existingAnnotations = [];

  selectedSpans.forEach(span => {
    const enclosingAnnotationSpan = span.closest('.r6o-annotation');
    const enclosingAnnotation = enclosingAnnotationSpan?.annotation;

    if (enclosingAnnotation && !existingAnnotations.includes(enclosingAnnotation))
      existingAnnotations.push(enclosingAnnotation);
  });

  if (existingAnnotations.length > 0)
    return existingAnnotations.filter(anno => {
      const isSameAnchor = anno.anchor == newAnnotation.anchor;
      const isSameQuote = anno.quote == newAnnotation.quote; // <<<< HERE
      return isSameAnchor && isSameQuote;
    });
  else
    return [];
};

This happens when trying to select text which has already been annotated.

Highlight with multiple colors

Its possible to set multiple colors on highlight?

Not recognizing specific characters such as §

If the character § is in a text, when i try to get the start_index and end_index the indexes are wrong by 1.

It is as if the character § is not there. But in reality it is there. Which is problematic when needed the specific position of a word.

When testing, revocito got the position of the words correctly up to this character §. After they position of each subsequent word is wrong by 1.

The editor does not allow selection of text in readonly mode

When trying to select text inside the content element(with "readOnly" enabled) the selected text gets deselected upon right mouse click so it's impossible for the user to copy it via the context menu.
In my POV the problem comes from the clearSelection method in SelectionHandler class which could be evolved to respect the read only mode.

I patched it locally with a simple
if(this.readOnly) { return; }
in the beginning of the method.

This suits my needs but as I'm not familiar with all the features it is possible that it's a very usecase realated fix and will break some other usecases I don't use.

Timeline for new release?

Can you estimate when a new versions of the libraries will be published to the npm registry?

Remove axios dependency in favour of standard fetch

Same as already done in Annotorious and AnnotoriousOSD.

Annotations and contenteditable

I annotate words in a p container which can also be made editable using the contenteditable attribute of HTML.
I experience the following behavior:
Initial situation:

Example line: 2‘. […] x GU4?

I can add an annotation to GU4, let's say "abc".

Then I modify the line using contenteditable=true to the following:

2‘. […] x abcde GU4?

Until here everything is fine because the annotation is moved with GU4.

Now I add another annotation to GU4 and the position of the annotation of GU4 is reset to its original position before I edited the text field.

Is this the anticipated behavior or is this a bug?

Mismatching TextQuoteSelector and TextPositionSelector

Have you run into some browsers (possibly mobile) that would create mismatching TextQuoteSelector and TextPositionSelector values? I have some users complaining that their annotations are off, and they are. The TextQuoteSelector exact is correct but the TextPositionSelector start + end are off, and there doesn't seem to be any logic to how much they are off, it varies from paragraph to paragraph.

Theme as separate import?

Somewhat inspired from the discussion in issue #1, I wonder if it’s possible to split the code from the CSS theme. With the switch to { Recogito } as a named import, this should be easy when working in an npm-based project (I guess).

But what about HTML pages that just include the built js file via <script> tag? I assume we’d need to find a way for the Webpack build to generate separate code and stylesheet files.

Enhanced formatters

The formatter API should be upgraded to the same level as in Annotorious. Instead of just allowing a single function on init, which can only output a CSS class name, we should also include:

the ability to return CSS style rules which get embedded into the SPANs directly (i.e. no need for a "detour" via CSS class)
the ability to inject data-* attributes
possibly the ability to append additional markup to implement labels (like the Annotorious Shape Label plugin does)
support for multiple formatters
ability to add/remove formatters dynamically

Creating annotation does not seem to work when target element is in iframe

RecogitoJS seems to be rendering ok when applying it to the contents of an IFRAME. However, selecting text to create an annotation does not seem to be working. Not that in the specific case, RecogitoJS is initialized outside the iframe but then told to annotate an element within the iframe.

Specifically, SelectionHandler.js :: _onMouseUp seems to be obtaining the selection from the wrong document. I.e. it is obtaining the selection from the document outside of the iframe when the selection that has been made was within the iframe:

_onMouseUp = evt => {
    if (this.isEnabled) {
      const selection = getSelection(); // << e.g. here

Instead, the selection should probably be obtained from the document which owns the target element of the mouse event, e.g. evt.target.ownerDocument.getSelection().

Annotate text in text area?

Hello, thank you for the awesome work you've created here! I have a small question, is it possible to annotate text that I enter in a textarea? Thank you!

RelationEditor: onClick and PointerEvent

Hi everyone,

I have a problem when I create a relation between the annotation when I click on the svg icon to confirm the tag name of relation. Instead of passing correct string values the component get the PointerEvent value (corresponding to the click of the mouse and not the text value inserted before).

Is there any method to pass the string instead of the PointerEvent?

Thanks.

p.s: I know that relations will be unsupported by this library but I need this component for a personal project.

Docs for relations mode?

Guys, can you please provide a documentation for relation?

Resizable annotations

The goal would be to have drag handles at the start and end of a selection highlight, and dragging with the mouse would shrink or expand the selection over the text.

I frankly have no idea how to approach that from a technical lelvel. (I doubt it's possible without investing major effort. But maybe there are tricks I'm not ware of.)

If anyone has ideas on how to do it: do drop them below :-)

Extending the comment popup

First of all thanks for a great annotation tool that just works. I need to make a couple of enhancements and would like to get your thoughts on how to go about it so that updates to recogito-js would still not be affected due to the extensions.

I need to have an at mention capability in the comments dialog. Just like the GitHub issue @rsimon kind of mention capability
Also, although setAuthInfo() is used its not restricting edit/delete of another user's comments by current user. How do we achieve that?

Any ideas on what would be the best approach to implement the above?

Two more questions

Hi!
I'm here for a further two-folds request of help.

1° Question) In this React tsx page of my Electron-React-Webpack-Typescript app I've put the new instance of Recogito within React.useEffect.

To change the Recognition Mode between ANNOTATION and RELATIONS, I set a ToggleSwitch for which I attached an onAnnotationModeChange function. For making this function being able to change the Recognition Mode with r.setMode I had to put this function within React.useEffect.

But in this way I get this error :

Cannot find name 'onAnnotationModeChange'.

155           onChange={onAnnotationModeChange}
                        ~~~~~~~~~~~~~~~~~~~~~~

This is the React page:

function App_B() {

  React.useEffect(() => {
    let r = new Recogito({ content: 'my-content' });

    r.on('createAnnotation', function(a) {
      console.log('created', a);
    });

    r.on('updateAnnotation', function(annotation, previous) {
      console.log('updated', previous, 'with', annotation);
    });

    r.on('removeAnnotation', function(a) {
      r.removeAnnotation(a);
    });

    const onAnnotationModeChange = (checked) => {
      setAnnotationMode(checked);
      if (!checked) {
        r.setMode('RELATIONS');
      }
    }

    return () => { // clean-up function

    }
  },[]);


  let [annotationMode, setAnnotationMode] = React.useState(false);

    return (
      <div className='outer-container'>

        <ToggleSwitch
          id="annotationMode"
          checked={annotationMode}
          onChange={onAnnotationModeChange}
        />

        <div id="my-content" className="plaintext">
          <h1>Homer: The Odyssey</h1>
          <p>
            <strong>Tell me, O muse,</strong> of that ingenious hero who travelled far and wide after he had sacked
            the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs
            he was acquainted; moreover he suffered much by sea while trying to save his own life and bring his men safely
            home; but do what he might he could not save his men, for they perished through their own sheer folly in eating
            the cattle of the Sun-god Hyperion; so the god prevented them from ever reaching home. Tell me, too, about all
            these things, O daughter of Jove, from whatsoever source you may know them.
          </p>
          <p>
            <strong>So now all who escaped death in battle</strong> or by shipwreck had got safely home except Ulysses,
            and he, though he was longing to return to his wife and country, was detained by the goddess Calypso, who
            had got him into a large cave and wanted to marry him. But as years went by, there came a time when the gods
            settled that he should go back to Ithaca; even then, however, when he was among his own people, his troubles
            were not yet over; nevertheless all the gods had now begun to pity him except Neptune, who still persecuted
            him without ceasing and would not let him get home.
          </p>
        </div>


  </div>
);

}

export default App_B;

If I put the the function onAnnotaionModeChange outside of React.useEffect:

  let r;

  React.useEffect(() => {

    //let r = new Recogito({ content: 'my-content' });
    r = new Recogito({ content: 'my-content' });

   r.on('createAnnotation', function(a) {
      console.log('created', a);
    });

    r.on('updateAnnotation', function(annotation, previous) {
      console.log('updated', previous, 'with', annotation);
    });

    r.on('removeAnnotation', function(a) {
      r.removeAnnotation(a);
    });

return () => { // clean-up function
}

},[]);

const onAnnotationModeChange = (checked) => {
  setAnnotationMode(checked);
  if (!checked) {
    r.setMode('RELATIONS');
  }

The previous error disappears, but the change of mode doesn't work.

2° Question)

When an annotation is created, the annotation object has an id element.

My objective is to store the annotations in a sqlite local db and, in case the annotation is being deleted / modified from the UI, delete /modify the corresponding store annotation in the local db.
It's not clear to me how to retrieve the id element of the annotation upon which we make an action: deletion or modification ( https://github.com/recogito/recogito-js/wiki/API-Reference#removeannotationannotation )

Unable to annotate in Windows 10 IE11

console report

recogito / recogito-js Goto Github PK

recogito-js's People

Contributors

Stargazers

Watchers

Forkers

recogito-js's Issues

Recommend Projects

Recommend Topics

Recommend Org