From 0dc7add99b1f52a8ec88828b6cd381dcc084d2c4 Mon Sep 17 00:00:00 2001 From: karin-lu <95747594+karin-lu@users.noreply.github.com> Date: Mon, 5 Dec 2022 14:45:32 +0100 Subject: [PATCH 1/5] npm install --- node-backend/package-lock.json | 11 +++++++++++ node-backend/package.json | 5 +++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/node-backend/package-lock.json b/node-backend/package-lock.json index 9ebce232..279df48b 100644 --- a/node-backend/package-lock.json +++ b/node-backend/package-lock.json @@ -8,6 +8,7 @@ "name": "basic-auth-app", "version": "0.0.0", "dependencies": { + "all": "^0.0.0", "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", @@ -85,6 +86,11 @@ "node": ">=0.10.0" } }, + "node_modules/all": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/all/-/all-0.0.0.tgz", + "integrity": "sha512-0oKlfNVv2d+d7c1gwjGspzgbwot47PGQ4b3v1ccx4mR8l9P/Y6E6Dr/yE8lNT63EcAKEbHo6UG3odDpC/NQcKw==" + }, "node_modules/amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", @@ -1342,6 +1348,11 @@ "repeat-string": "^1.5.2" } }, + "all": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/all/-/all-0.0.0.tgz", + "integrity": "sha512-0oKlfNVv2d+d7c1gwjGspzgbwot47PGQ4b3v1ccx4mR8l9P/Y6E6Dr/yE8lNT63EcAKEbHo6UG3odDpC/NQcKw==" + }, "amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", diff --git a/node-backend/package.json b/node-backend/package.json index 05aafda2..3705f809 100644 --- a/node-backend/package.json +++ b/node-backend/package.json @@ -7,13 +7,14 @@ "start": "SET DBPORT=65535 && node ./bin/www" }, "dependencies": { + "all": "^0.0.0", "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "jade": "~1.11.0", + "monk": "7.3.3", "morgan": "~1.9.1", - "njwt": "^1.0.0", - "monk": "7.3.3" + "njwt": "^1.0.0" } } From 227e78d97f4b5fdba6f7a0b1af1a9781d7f20175 Mon Sep 17 00:00:00 2001 From: Totta-Git Date: Tue, 17 Jan 2023 17:50:25 +0100 Subject: [PATCH 2/5] Create WYSIWYG_editor.js --- react-frontend/WYSIWYG_editor.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 react-frontend/WYSIWYG_editor.js diff --git a/react-frontend/WYSIWYG_editor.js b/react-frontend/WYSIWYG_editor.js new file mode 100644 index 00000000..e69de29b From 232714edcb22d2eb6efc3d3c597ed3865b719bdb Mon Sep 17 00:00:00 2001 From: Totta-Git Date: Tue, 17 Jan 2023 18:33:16 +0100 Subject: [PATCH 3/5] WYSIWYG_editor vers 2 --- react-frontend/WYSIWYG_editor.js | 0 .../WYSIWYG_editor_codepen/WYSIWYG_editor.css | 30 ++++++++++++ .../WYSIWYG_editor.html | 49 +++++++++++++++++++ .../WYSIWYG_editor_codepen/WYSIWYG_editor.js | 22 +++++++++ 4 files changed, 101 insertions(+) delete mode 100644 react-frontend/WYSIWYG_editor.js create mode 100644 react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css create mode 100644 react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html create mode 100644 react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js diff --git a/react-frontend/WYSIWYG_editor.js b/react-frontend/WYSIWYG_editor.js deleted file mode 100644 index e69de29b..00000000 diff --git a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css new file mode 100644 index 00000000..e46b6e9b --- /dev/null +++ b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css @@ -0,0 +1,30 @@ +html, body { + background: #f5f5f5 !important; + } + + .content { + margin: 50px auto 0; + } + + h1#head { + font-family: 'Euphoria Script'; + text-align: center; + margin: 0 0 30px; + font-size: 100px; + line-height: 90px; + text-shadow: 1px 1px 1px #343434; + font-weight: normal; + } + + #editor { + resize:vertical; + overflow:auto; + border:1px solid silver; + border-radius:5px; + min-height:100px; + box-shadow: inset 0 0 10px silver; + padding:1em; + background: white; + margin: 0 auto; + width: 90%; + } \ No newline at end of file diff --git a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html new file mode 100644 index 00000000..c8e7270b --- /dev/null +++ b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html @@ -0,0 +1,49 @@ + + + + + +
+

Simple wysiwyg editor

+
+
+
+ + +
+
+ Bold + Italic + U + abc +
+
+ + + + +
+
+ + +
+
+ + +
+
+ h1 + h2 + p +
+
+ + +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus natus vero voluptatem aliquam molestias dicta aperiam dignissimos laudantium accusamus saepe!

+
+
+
+ \ No newline at end of file diff --git a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js new file mode 100644 index 00000000..467c224a --- /dev/null +++ b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js @@ -0,0 +1,22 @@ +/********************************** + +Orinal code from this article: +http://www.barneyparker.com/world-simplest-html5-wysisyg-inline-editor/ + +**********************************/ + +$(function() { + $('#editControls a').click(function(e) { + switch($(this).data('role')) { + case 'h1': + case 'h2': + case 'p': + document.execCommand('formatBlock', false, $(this).data('role')); + break; + default: + document.execCommand($(this).data('role'), false, null); + break; + } + + }); + }); \ No newline at end of file From dc74e0da6ae4775964b2cdad37cea00746d7839b Mon Sep 17 00:00:00 2001 From: Totta-Git Date: Mon, 23 Jan 2023 11:10:58 +0100 Subject: [PATCH 4/5] Past-changes --- package.json | 6 + .../WYSIWYG_editor_codepen/WYSIWYG_editor.css | 30 --- .../WYSIWYG_editor.html | 49 ----- .../WYSIWYG_editor_codepen/WYSIWYG_editor.js | 22 --- react-frontend/src/webpack.config.js | 24 +++ react-frontend/src/wysiwyg-editor-react.js | 185 ++++++++++++++++++ react-frontend/src/wysiwyg-editor-react.jsx | 145 ++++++++++++++ 7 files changed, 360 insertions(+), 101 deletions(-) create mode 100644 package.json delete mode 100644 react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css delete mode 100644 react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html delete mode 100644 react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js create mode 100644 react-frontend/src/webpack.config.js create mode 100644 react-frontend/src/wysiwyg-editor-react.js create mode 100644 react-frontend/src/wysiwyg-editor-react.jsx diff --git a/package.json b/package.json new file mode 100644 index 00000000..a73cd332 --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "dependencies": { + "react-web-editor": "^2.2.6", + "wysiwyg-editor-react": "^0.1.7" + } +} diff --git a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css deleted file mode 100644 index e46b6e9b..00000000 --- a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.css +++ /dev/null @@ -1,30 +0,0 @@ -html, body { - background: #f5f5f5 !important; - } - - .content { - margin: 50px auto 0; - } - - h1#head { - font-family: 'Euphoria Script'; - text-align: center; - margin: 0 0 30px; - font-size: 100px; - line-height: 90px; - text-shadow: 1px 1px 1px #343434; - font-weight: normal; - } - - #editor { - resize:vertical; - overflow:auto; - border:1px solid silver; - border-radius:5px; - min-height:100px; - box-shadow: inset 0 0 10px silver; - padding:1em; - background: white; - margin: 0 auto; - width: 90%; - } \ No newline at end of file diff --git a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html deleted file mode 100644 index c8e7270b..00000000 --- a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - -
-

Simple wysiwyg editor

-
-
-
- - -
-
- Bold - Italic - U - abc -
-
- - - - -
-
- - -
-
- - -
-
- h1 - h2 - p -
-
- - -
-
-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus natus vero voluptatem aliquam molestias dicta aperiam dignissimos laudantium accusamus saepe!

-
-
-
- \ No newline at end of file diff --git a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js b/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js deleted file mode 100644 index 467c224a..00000000 --- a/react-frontend/WYSIWYG_editor_codepen/WYSIWYG_editor.js +++ /dev/null @@ -1,22 +0,0 @@ -/********************************** - -Orinal code from this article: -http://www.barneyparker.com/world-simplest-html5-wysisyg-inline-editor/ - -**********************************/ - -$(function() { - $('#editControls a').click(function(e) { - switch($(this).data('role')) { - case 'h1': - case 'h2': - case 'p': - document.execCommand('formatBlock', false, $(this).data('role')); - break; - default: - document.execCommand($(this).data('role'), false, null); - break; - } - - }); - }); \ No newline at end of file diff --git a/react-frontend/src/webpack.config.js b/react-frontend/src/webpack.config.js new file mode 100644 index 00000000..387d74f2 --- /dev/null +++ b/react-frontend/src/webpack.config.js @@ -0,0 +1,24 @@ +module.exports = { + entry: "./example/index.js", + output: { + path: './example', + filename: 'bundle.js', + publicPath: '/' + }, + devServer: { + inline: true, + contentBase: './example', + port: 3333 + }, + module: { + loaders: [ + { + test: /\.jsx?$/, + exclude: /(node_modules|bower_components)/, + loader: 'babel', + query: { + presets: [ 'es2015', 'react' ] + } + }] + } +}; \ No newline at end of file diff --git a/react-frontend/src/wysiwyg-editor-react.js b/react-frontend/src/wysiwyg-editor-react.js new file mode 100644 index 00000000..e41298ab --- /dev/null +++ b/react-frontend/src/wysiwyg-editor-react.js @@ -0,0 +1,185 @@ +'use strict'; + +var React = require('react'); + +var TextEditor = React.createClass({ + displayName: 'TextEditor', + + + getInitialState: function getInitialState() { + return { + ref: this.props.reference || 'wysiwyg_editor', + id: this.props.id || 'wysiwyg_editor', + className: this.props.className || 'well', + style: this.props.style || { maxHeight: '300px', overflow: 'scroll' }, + toolbar_buttons: this.props.toolbar_buttons || ['bold', 'italic', 'underline', 'list', 'link', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'image', 'header'], + show_toolbar: this.props.show_toolbar === undefined ? true : this.props.show_toolbar, + headerTags: ['

', '

', '

', '

', '

', '
'] + }; + }, + componentWillReceiveProps: function componentWillReceiveProps(newProps) { + if (this.state.ref !== newProps.reference || this.state.id !== newProps.id) { + this.setState({ + ref: newProps.reference, + id: newProps.id + }); + } + }, + insertStyle: function insertStyle(type) { + document.execCommand(type, false, null); + this.contentUpdate(); + }, + insertHeading: function insertHeading(h) { + document.execCommand('formatBlock', false, h); + this.contentUpdate(); + }, + insertLink: function insertLink(uri) { + document.execCommand('createLink', false, uri); + this.setState({ link_url: '' }, function () { + this.contentUpdate(); + }); + }, + insertField: function insertField(field, e) { + document.execCommand('insertText', false, field); + this.contentUpdate(); + }, + insertImage: function insertImage(uri) { + document.execCommand('insertImage', false, uri); + this.contentUpdate(); + }, + uploadImage: function uploadImage(e) { + var file = e.target.files[0]; + var reader = new FileReader(); + if (file) { + reader.onload = this.imageIsLoaded; + reader.readAsDataURL(file); + } + }, + imageIsLoaded: function imageIsLoaded(e) { + this.insertImage(e.target.result); + }, + setCursor: function setCursor() { + React.findDOMNode(this.refs[this.state.ref]).focus(); + var sel = window.getSelection(); + var range = document.createRange(); + range.setStart(React.findDOMNode(this.refs[this.state.ref]), 0); + range.collapse(true); + sel.removeAllRanges(); + sel.addRange(range); + }, + onMouseDown: function onMouseDown() { + this.setCursor(); + }, + onKeyUp: function onKeyUp(e) { + this.contentUpdate(); + }, + contentUpdate: function contentUpdate() { + var target = React.findDOMNode(this.refs[this.state.ref]); + target.focus(); + this.props.update(target.innerHTML, this.state.ref); + }, + onUrlChange: function onUrlChange(e) { + this.setState({ link_url: e.target.value }); + }, + toolBar: function toolBar() { + if (!this.state.show_toolbar) { + return null; + } + + return this.state.toolbar_buttons.map(function (type) { + return this.getButton(type); + }, this); + }, + getButton: function getButton(type) { + switch (type) { + case 'link': + return React.createElement( + 'div', + { className: 'input-group', key: '_wysiwyg_' + type }, + React.createElement( + 'span', + { className: 'input-group-btn' }, + React.createElement( + 'button', + { key: type, type: 'button', className: 'btn btn-primary', onClick: this.insertLink.bind(null, this.state.link_url) }, + React.createElement('i', { className: 'glyphicon glyphicon-link' }) + ) + ), + React.createElement('input', { type: 'text', className: 'form-control', placeholder: 'URL', value: this.state.link_url, onChange: this.onUrlChange }) + ); + case 'list': + return React.createElement( + 'button', + { key: type, type: 'button', className: 'btn btn-primary', onClick: this.insertStyle.bind(null, 'insertUnorderedList') }, + React.createElement('i', { className: 'glyphicon glyphicon-list' }) + ); + case 'underline': + return React.createElement( + 'button', + { key: type, type: 'button', className: 'btn btn-primary', onClick: this.insertStyle.bind(null, type) }, + 'U' + ); + case 'justify': + var pos = type.split('justify')[1].toLowerCase(); + if (pos === 'full') { + pos = 'justify'; + } + return React.createElement( + 'button', + { key: type, type: 'button', className: 'btn btn-primary', onClick: this.insertStyle.bind(null, type) }, + React.createElement('i', { className: "glyphicon glyphicon-align-" + pos }) + ); + case 'image': + return React.createElement('input', { style: { display: 'inline' }, key: type, type: 'file', className: 'btn btn-primary', onChange: this.uploadImage.bind(this) }); + case 'header': + return this.state.headerTags.map(function (tag, i) { + return React.createElement( + 'button', + { key: type + '_' + tag, type: 'button', className: 'btn btn-primary', onClick: this.insertHeading.bind(null, tag) }, + React.createElement('i', { className: "glyphicon glyphicon-header" }), + i + 1 + ); + }, this); + default: + return React.createElement( + 'button', + { key: type, type: 'button', className: 'btn btn-primary', onClick: this.insertStyle.bind(null, type) }, + React.createElement('i', { className: "glyphicon glyphicon-" + type }) + ); + } + }, + txtEditor: function txtEditor() { + return React.createElement('div', { + id: this.state.id, + ref: this.state.ref, + name: 'text_body', + className: this.state.className, + tabIndex: 0, + key: '0', + contentEditable: true, + onMouseDown: this.onMouseDown, + onTouchStart: this.onMouseDown, + onKeyUp: this.onKeyUp, + onClick: this.props.onClick, + style: this.state.style, + dangerouslySetInnerHTML: { + __html: this.props.html + } + }); + }, + + render: function render() { + return React.createElement( + 'div', + null, + React.createElement( + 'div', + { className: 'form-inline' }, + this.toolBar() + ), + this.txtEditor() + ); + } +}); + +module.exports = TextEditor; \ No newline at end of file diff --git a/react-frontend/src/wysiwyg-editor-react.jsx b/react-frontend/src/wysiwyg-editor-react.jsx new file mode 100644 index 00000000..c4440efe --- /dev/null +++ b/react-frontend/src/wysiwyg-editor-react.jsx @@ -0,0 +1,145 @@ +var React = require( 'react' ); + +var TextEditor = React.createClass({ + + getInitialState: function () { + return { + ref: this.props.reference || 'wysiwyg_editor', + id: this.props.id || 'wysiwyg_editor', + className: this.props.className || 'well', + style: this.props.style || { maxHeight: '300px', overflow: 'scroll' }, + toolbar_buttons: this.props.toolbar_buttons || [ 'bold', 'italic', 'underline', 'list', 'link', 'justifyLeft', 'justifyCenter','justifyRight', 'justifyFull', 'image', 'header' ], + show_toolbar: this.props.show_toolbar === undefined ? true : this.props.show_toolbar, + headerTags: [ '

', '

', '

', '

', '

', '
' ] + } + }, + componentWillReceiveProps: function ( newProps ) { + if ( this.state.ref !== newProps.reference || this.state.id !== newProps.id ) { + this.setState( { + ref: newProps.reference, + id: newProps.id + } ); + } + }, + insertStyle: function ( type ) { + document.execCommand( type, false, null ); + this.contentUpdate(); + }, + insertHeading: function ( h ) { + document.execCommand( 'formatBlock', false, h ); + this.contentUpdate(); + }, + insertLink: function ( uri ) { + document.execCommand( 'createLink', false, uri ); + this.setState( { link_url: '' }, function () { + this.contentUpdate(); + } ); + }, + insertField: function ( field, e ) { + document.execCommand( 'insertText', false, field ); + this.contentUpdate(); + }, + insertImage: function ( uri ) { + document.execCommand( 'insertImage', false, uri ); + this.contentUpdate(); + }, + uploadImage: function ( e ) { + var file = e.target.files[ 0 ]; + var reader = new FileReader(); + if ( file ) { + reader.onload = this.imageIsLoaded; + reader.readAsDataURL( file ); + } + }, + imageIsLoaded: function ( e ) { + this.insertImage( e.target.result ); + }, + setCursor: function () { + React.findDOMNode( this.refs[ this.state.ref ] ).focus(); + var sel = window.getSelection(); + var range = document.createRange(); + range.setStart( React.findDOMNode( this.refs[ this.state.ref ] ), 0 ); + range.collapse( true ); + sel.removeAllRanges(); + sel.addRange( range ); + }, + onMouseDown: function () { + this.setCursor(); + }, + onKeyUp: function ( e ) { + this.contentUpdate(); + }, + contentUpdate: function () { + var target = React.findDOMNode( this.refs[ this.state.ref ] ); + target.focus(); + this.props.update( target.innerHTML, this.state.ref ); + }, + onUrlChange: function ( e ) { + this.setState( { link_url: e.target.value } ); + }, + toolBar: function () { + if ( !this.state.show_toolbar ) { return null; } + + return this.state.toolbar_buttons.map( function ( type ) { + return this.getButton( type ); + }, this ); + }, + getButton: function ( type ) { + switch ( type ) { + case 'link': + return ( +
+ + + + +
+ ); + case 'list': + return ; + case 'underline': + return ; + case 'justify': + var pos = type.split( 'justify' )[ 1 ].toLowerCase(); + if ( pos === 'full' ) { pos = 'justify' } + return ; + case 'image': + return ; + case 'header': + return this.state.headerTags.map( function ( tag, i ) { + return + }, this ); + default: + return ; + } + }, + txtEditor () { + return React.createElement( 'div', { + id: this.state.id, + ref: this.state.ref, + name: 'text_body', + className: this.state.className, + tabIndex: 0, + key: '0', + contentEditable: true, + onMouseDown: this.onMouseDown, + onTouchStart: this.onMouseDown, + onKeyUp: this.onKeyUp, + onClick: this.props.onClick, + style: this.state.style, + dangerouslySetInnerHTML: { + __html: this.props.html + } + } ); + }, + render: function(){ + return ( +
+
{ this.toolBar() }
+ { this.txtEditor() } +
+ ); + } +} ); + +module.exports = TextEditor; \ No newline at end of file From 03ae8cdbc7bbd1f8f69608b878ed0177a88fbdb1 Mon Sep 17 00:00:00 2001 From: Totta-Git Date: Mon, 23 Jan 2023 12:37:43 +0100 Subject: [PATCH 5/5] Change of App page + New Editor Folder --- package.json | 1 + react-frontend/src/App.js | 5 ++++- .../src/{webpack.config.js => Editor/Webpack.config.js} | 0 .../Wysiwyg-editor-react.js} | 0 react-frontend/src/{ => Editor}/wysiwyg-editor-react.jsx | 0 5 files changed, 5 insertions(+), 1 deletion(-) rename react-frontend/src/{webpack.config.js => Editor/Webpack.config.js} (100%) rename react-frontend/src/{wysiwyg-editor-react.js => Editor/Wysiwyg-editor-react.js} (100%) rename react-frontend/src/{ => Editor}/wysiwyg-editor-react.jsx (100%) diff --git a/package.json b/package.json index a73cd332..b15126cd 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "react-router-dom": "^6.7.0", "react-web-editor": "^2.2.6", "wysiwyg-editor-react": "^0.1.7" } diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js index 37845757..c85605e6 100644 --- a/react-frontend/src/App.js +++ b/react-frontend/src/App.js @@ -1,3 +1,4 @@ +import React from 'react'; import logo from './logo.svg'; import './App.css'; @@ -11,7 +12,7 @@ function App() {

@@ -23,3 +24,5 @@ function App() { } export default App; + + diff --git a/react-frontend/src/webpack.config.js b/react-frontend/src/Editor/Webpack.config.js similarity index 100% rename from react-frontend/src/webpack.config.js rename to react-frontend/src/Editor/Webpack.config.js diff --git a/react-frontend/src/wysiwyg-editor-react.js b/react-frontend/src/Editor/Wysiwyg-editor-react.js similarity index 100% rename from react-frontend/src/wysiwyg-editor-react.js rename to react-frontend/src/Editor/Wysiwyg-editor-react.js diff --git a/react-frontend/src/wysiwyg-editor-react.jsx b/react-frontend/src/Editor/wysiwyg-editor-react.jsx similarity index 100% rename from react-frontend/src/wysiwyg-editor-react.jsx rename to react-frontend/src/Editor/wysiwyg-editor-react.jsx