I am attempting to combine the ‘Tough Notation’ JS Library into my WordPress web site.
See:
https://roughnotation.com/
https://github.com/rough-stuff/rough-notation
I am simply utilizing their fundamental demo code (at: https://glitch.com/~basic-rough-notation) which makes use of the next script:
<script sort="module">
import { annotate } from 'https://unpkg.com/rough-notation?module';
const n1 = doc.querySelector('em');
const n2 = doc.querySelector('sturdy');
const n3 = doc.querySelector('h1');
const n4 = doc.querySelector('span');
const n5 = doc.querySelector('#block');
const a1 = annotate(n1, { sort: 'underline', shade: 'blue' });
const a2 = annotate(n2, { sort: 'circle', shade: 'crimson', padding: 10 });
const a3 = annotate(n3, { sort: 'field', shade: 'orange' });
const a4 = annotate(n4, { sort: 'spotlight', shade: 'yellow', iterations: 1, multiline: true });
const a5 = annotate(n5, { sort: 'bracket', shade: 'crimson', padding: [2, 10], brackets: ['left', 'right'], strokeWidth: 3 })
a1.present();
a2.present();
a3.present();
a4.present();
a5.present();
</script>
(I am loading this into WordPress as ‘annotate-text.js’)
Initially I bought the next error:
annotate-text.js?ver=6.0.1:1 Uncaught SyntaxError: Can not use import assertion outdoors a
module (at annotate-text.js?ver=6.0.1:1:1)
however after studying by some solutions on StackOverflow I arrange the next script to load the RoughNotation module:
perform annotate_scripts()
wp_enqueue_script( 'module_handle', get_stylesheet_directory_uri() . '/js/annotate-text.js',
array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'annotate_scripts' );
perform set_scripts_type_attribute( $tag, $deal with, $src ) {
if ( 'module_handle' === $deal with ) {
$tag = '<script sort="module" src="'. $src .'"></script>';
}
return $tag;
}
add_filter( 'script_loader_tag', 'set_scripts_type_attribute', 10, 3 );
So, it appears to be like prefer it’s working and RoughNotation is loading. However now I get one other, totally different error:
Uncaught TypeError: Can not learn properties of null (studying 'parentElement')
at p.connect (rough-notation.esm.js?module:1:9287)
at new p (rough-notation.esm.js?module:1:8501)
at _ (rough-notation.esm.js?module:1:12411)
at annotate-text.js?ver=6.0.1:10:18
Questioning if somebody can present me the best way to resolve this.
I’ve checked by StackOverflow once more however unsure the best way to implement solutions to related issues.
Thanks