diff --git a/package-lock.json b/package-lock.json index 3bb1324..b29f893 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "axios": "^0.25.0", + "draft-js": "^0.11.7", "jalaali-js": "^1.2.3", "jalali-moment": "^3.3.10", "lord-icon-element": "^3.3.3", @@ -19,6 +20,7 @@ "mapir-react-component": "^2.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.4.2", "react-icons": "^4.3.1", "react-indiana-drag-scroll": "^2.1.0", @@ -5585,6 +5587,14 @@ "node": ">=10" } }, + "node_modules/cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "dependencies": { + "node-fetch": "2.6.7" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -6410,6 +6420,37 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, + "node_modules/draft-js": { + "version": "0.11.7", + "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz", + "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==", + "dependencies": { + "fbjs": "^2.0.0", + "immutable": "~3.7.4", + "object-assign": "^4.1.1" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-dom": ">=0.14.0" + } + }, + "node_modules/draft-js/node_modules/immutable": { + "version": "3.7.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz", + "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/draftjs-utils": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz", + "integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==", + "peerDependencies": { + "draft-js": "^0.11.x", + "immutable": "3.x.x || 4.x.x" + } + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -7569,6 +7610,34 @@ "bser": "2.1.1" } }, + "node_modules/fbjs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz", + "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==", + "dependencies": { + "core-js": "^3.6.4", + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, + "node_modules/fbjs-css-vars": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", + "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + }, + "node_modules/fbjs/node_modules/promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dependencies": { + "asap": "~2.0.3" + } + }, "node_modules/figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -8458,6 +8527,15 @@ "node": ">=12" } }, + "node_modules/html-to-draftjs": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz", + "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==", + "peerDependencies": { + "draft-js": "^0.10.x || ^0.11.x", + "immutable": "3.x.x || 4.x.x" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -11335,6 +11413,14 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "dependencies": { + "uc.micro": "^1.0.1" + } + }, "node_modules/loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -11931,6 +12017,44 @@ "tslib": "^2.0.3" } }, + "node_modules/node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/node-fetch/node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + }, + "node_modules/node-fetch/node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + }, + "node_modules/node-fetch/node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -14152,6 +14276,24 @@ "react": "17.0.2" } }, + "node_modules/react-draft-wysiwyg": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz", + "integrity": "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==", + "dependencies": { + "classnames": "^2.2.6", + "draftjs-utils": "^0.10.2", + "html-to-draftjs": "^1.5.0", + "linkify-it": "^2.2.0", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "draft-js": "^0.10.x || ^0.11.x", + "immutable": "3.x.x || 4.x.x", + "react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", + "react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x" + } + }, "node_modules/react-dropzone": { "version": "11.5.3", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz", @@ -15117,6 +15259,11 @@ "node": ">= 0.8.0" } }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -16171,6 +16318,29 @@ "node": ">=4.2.0" } }, + "node_modules/ua-parser-js": { + "version": "0.7.31", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", + "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + } + ], + "engines": { + "node": "*" + } + }, + "node_modules/uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -21334,6 +21504,14 @@ "yaml": "^1.10.0" } }, + "cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "requires": { + "node-fetch": "2.6.7" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -21937,6 +22115,29 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, + "draft-js": { + "version": "0.11.7", + "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz", + "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==", + "requires": { + "fbjs": "^2.0.0", + "immutable": "~3.7.4", + "object-assign": "^4.1.1" + }, + "dependencies": { + "immutable": { + "version": "3.7.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz", + "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=" + } + } + }, + "draftjs-utils": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz", + "integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==", + "requires": {} + }, "duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -22796,6 +22997,36 @@ "bser": "2.1.1" } }, + "fbjs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz", + "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==", + "requires": { + "core-js": "^3.6.4", + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, + "fbjs-css-vars": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", + "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + }, "figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -23435,6 +23666,12 @@ "terser": "^5.10.0" } }, + "html-to-draftjs": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz", + "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==", + "requires": {} + }, "html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -25493,6 +25730,14 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "requires": { + "uc.micro": "^1.0.1" + } + }, "loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -25951,6 +26196,35 @@ "tslib": "^2.0.3" } }, + "node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "requires": { + "whatwg-url": "^5.0.0" + }, + "dependencies": { + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + } + }, "node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -27401,6 +27675,18 @@ "scheduler": "^0.20.2" } }, + "react-draft-wysiwyg": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz", + "integrity": "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==", + "requires": { + "classnames": "^2.2.6", + "draftjs-utils": "^0.10.2", + "html-to-draftjs": "^1.5.0", + "linkify-it": "^2.2.0", + "prop-types": "^15.7.2" + } + }, "react-dropzone": { "version": "11.5.3", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz", @@ -28112,6 +28398,11 @@ "send": "0.17.2" } }, + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, "setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -28902,6 +29193,16 @@ "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==", "peer": true }, + "ua-parser-js": { + "version": "0.7.31", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", + "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==" + }, + "uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", diff --git a/package.json b/package.json index c18a747..42cb5fd 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "axios": "^0.25.0", + "draft-js": "^0.11.7", "jalaali-js": "^1.2.3", "jalali-moment": "^3.3.10", "lord-icon-element": "^3.3.3", @@ -14,6 +15,7 @@ "mapir-react-component": "^2.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.4.2", "react-icons": "^4.3.1", "react-indiana-drag-scroll": "^2.1.0", diff --git a/src/view/addProduct/Main/editor.css b/src/view/addProduct/Main/editor.css new file mode 100644 index 0000000..1b9f7d7 --- /dev/null +++ b/src/view/addProduct/Main/editor.css @@ -0,0 +1,890 @@ +.rdw-option-wrapper { + border: 1px solid #F1F1F1; + padding: 5px; + min-width: 25px; + height: 20px; + border-radius: 2px; + margin: 0 4px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-option-wrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-option-wrapper:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-option-active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-option-disabled { + opacity: 0.3; + cursor: default; +} + +.rdw-dropdown-wrapper { + height: 30px; + background: white; + cursor: pointer; + border: 1px solid #F1F1F1; + border-radius: 2px; + margin: 0 3px; + text-transform: capitalize; + background: white; +} +.rdw-dropdown-wrapper:focus { + outline: none; +} +.rdw-dropdown-wrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; + background-color: #FFFFFF; +} +.rdw-dropdown-wrapper:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-dropdown-carettoopen { + height: 0px; + width: 0px; + position: absolute; + top: 35%; + right: 10%; + border-top: 6px solid black; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} +.rdw-dropdown-carettoclose { + height: 0px; + width: 0px; + position: absolute; + top: 35%; + right: 10%; + border-bottom: 6px solid black; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} +.rdw-dropdown-selectedtext { + display: flex; + position: relative; + height: 100%; + align-items: center; + padding: 0 5px; +} +.rdw-dropdown-optionwrapper { + z-index: 100; + position: relative; + border: 1px solid #F1F1F1; + width: 98%; + background: white; + border-radius: 2px; + margin: 0; + padding: 0; + max-height: 250px; + overflow-y: scroll; +} +.rdw-dropdown-optionwrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; + background-color: #FFFFFF; +} + +.rdw-dropdownoption-default { + min-height: 25px; + display: flex; + align-items: center; + padding: 0 5px; +} +.rdw-dropdownoption-highlighted { + background: #F1F1F1; +} +.rdw-dropdownoption-active { + background: #f5f5f5; +} +.rdw-dropdownoption-disabled { + opacity: 0.3; + cursor: default; +} + +.rdw-inline-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-inline-dropdown { + width: 50px; +} +.rdw-inline-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} + +.rdw-block-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-block-dropdown { + width: 110px; +} + +.rdw-fontsize-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-fontsize-dropdown { + min-width: 40px; +} +.rdw-fontsize-option { + display: flex; + justify-content: center; +} + +.rdw-fontfamily-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-fontfamily-dropdown { + width: 115px; +} +.rdw-fontfamily-placeholder { + white-space: nowrap; + max-width: 90px; + overflow: hidden; + text-overflow: ellipsis; +} +.rdw-fontfamily-optionwrapper { + width: 140px; +} + +.rdw-list-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-list-dropdown { + width: 50px; + z-index: 90; +} +.rdw-list-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} + +.rdw-text-align-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-text-align-dropdown { + width: 50px; + z-index: 90; +} +.rdw-text-align-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-right-aligned-block { + text-align: right; +} +.rdw-left-aligned-block { + text-align: left !important; +} +.rdw-center-aligned-block { + text-align: center !important; +} +.rdw-justify-aligned-block { + text-align: justify !important; +} +.rdw-right-aligned-block > div { + display: inline-block; +} +.rdw-left-aligned-block > div { + display: inline-block; +} +.rdw-center-aligned-block > div { + display: inline-block; +} +.rdw-justify-aligned-block > div { + display: inline-block; +} + +.rdw-colorpicker-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-colorpicker-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 175px; + height: 175px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-colorpicker-modal-header { + display: flex; + padding-bottom: 5px; +} +.rdw-colorpicker-modal-style-label { + font-size: 15px; + width: 50%; + text-align: center; + cursor: pointer; + padding: 0 10px 5px; +} +.rdw-colorpicker-modal-style-label-active { + border-bottom: 2px solid #0a66b7; +} +.rdw-colorpicker-modal-options { + margin: 5px auto; + display: flex; + width: 100%; + height: 100%; + flex-wrap: wrap; + overflow: scroll; +} +.rdw-colorpicker-cube { + width: 22px; + height: 22px; + border: 1px solid #F1F1F1; +} +.rdw-colorpicker-option { + margin: 3px; + padding: 0; + min-height: 20px; + border: none; + width: 22px; + height: 22px; + min-width: 22px; + box-shadow: 1px 2px 1px #BFBDBD inset; +} +.rdw-colorpicker-option:hover { + box-shadow: 1px 2px 1px #BFBDBD; +} +.rdw-colorpicker-option:active { + box-shadow: -1px -2px 1px #BFBDBD; +} +.rdw-colorpicker-option-active { + box-shadow: 0px 0px 2px 2px #BFBDBD; +} + +.rdw-link-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-link-dropdown { + width: 50px; +} +.rdw-link-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-link-dropdownPlaceholder { + margin-left: 8px; +} +.rdw-link-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + height: 205px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-link-modal-label { + font-size: 15px; +} +.rdw-link-modal-input { + margin-top: 5px; + border-radius: 2px; + border: 1px solid #F1F1F1; + height: 25px; + margin-bottom: 15px; + padding: 0 5px; +} +.rdw-link-modal-input:focus { + outline: none; +} +.rdw-link-modal-buttonsection { + margin: 0 auto; +} +.rdw-link-modal-target-option { + margin-bottom: 20px; +} +.rdw-link-modal-target-option > span { + margin-left: 5px; +} +.rdw-link-modal-btn { + margin-left: 10px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-link-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-link-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-link-modal-btn:focus { + outline: none !important; +} +.rdw-link-modal-btn:disabled { + background: #ece9e9; +} +.rdw-link-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-history-dropdown { + width: 50px; +} + +.rdw-embedded-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-embedded-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + height: 180px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + justify-content: space-between; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-embedded-modal-header { + font-size: 15px; + display: flex; +} +.rdw-embedded-modal-header-option { + width: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.rdw-embedded-modal-header-label { + width: 95px; + border: 1px solid #f1f1f1; + margin-top: 5px; + background: #6EB8D4; + border-bottom: 2px solid #0a66b7; +} +.rdw-embedded-modal-link-section { + display: flex; + flex-direction: column; +} +.rdw-embedded-modal-link-input { + width: 88%; + height: 35px; + margin: 10px 0; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 15px; + padding: 0 5px; +} +.rdw-embedded-modal-link-input-wrapper { + display: flex; + align-items: center; +} +.rdw-embedded-modal-link-input:focus { + outline: none; +} +.rdw-embedded-modal-btn-section { + display: flex; + justify-content: center; +} +.rdw-embedded-modal-btn { + margin: 0 3px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-embedded-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-embedded-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-embedded-modal-btn:focus { + outline: none !important; +} +.rdw-embedded-modal-btn:disabled { + background: #ece9e9; +} +.rdw-embedded-modal-size { + align-items: center; + display: flex; + margin: 8px 0; + justify-content: space-between; +} +.rdw-embedded-modal-size-input { + width: 80%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; +} +.rdw-embedded-modal-size-input:focus { + outline: none; +} + +.rdw-emoji-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-emoji-modal { + overflow: auto; + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-wrap: wrap; + width: 235px; + height: 180px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-emoji-icon { + margin: 2.5px; + height: 24px; + width: 24px; + cursor: pointer; + font-size: 22px; + display: flex; + justify-content: center; + align-items: center; +} + +.rdw-spinner { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; +} +.rdw-spinner > div { + width: 12px; + height: 12px; + background-color: #333; + + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} +.rdw-spinner .rdw-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} +.rdw-spinner .rdw-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} + +.rdw-image-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-image-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-image-modal-header { + font-size: 15px; + margin: 10px 0; + display: flex; +} +.rdw-image-modal-header-option { + width: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.rdw-image-modal-header-label { + width: 80px; + background: #f1f1f1; + border: 1px solid #f1f1f1; + margin-top: 5px; +} +.rdw-image-modal-header-label-highlighted { + background: #6EB8D4; + border-bottom: 2px solid #0a66b7; +} +.rdw-image-modal-upload-option { + width: 100%; + color: gray; + cursor: pointer; + display: flex; + border: none; + font-size: 15px; + align-items: center; + justify-content: center; + background-color: #f1f1f1; + outline: 2px dashed gray; + outline-offset: -10px; + margin: 10px 0; + padding: 9px 0; +} +.rdw-image-modal-upload-option-highlighted { + outline: 2px dashed #0a66b7; +} +.rdw-image-modal-upload-option-label { + cursor: pointer; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 15px; +} +.rdw-image-modal-upload-option-label span{ + padding: 0 20px; +} +.rdw-image-modal-upload-option-image-preview { + max-width: 100%; + max-height: 200px; +} +.rdw-image-modal-upload-option-input { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} +.rdw-image-modal-url-section { + display: flex; + align-items: center; +} +.rdw-image-modal-url-input { + width: 90%; + height: 35px; + margin: 15px 0 12px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 15px; + padding: 0 5px; +} +.rdw-image-modal-btn-section { + margin: 10px auto 0; +} +.rdw-image-modal-url-input:focus { + outline: none; +} +.rdw-image-modal-btn { + margin: 0 5px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-image-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-image-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-image-modal-btn:focus { + outline: none !important; +} +.rdw-image-modal-btn:disabled { + background: #ece9e9; +} +.rdw-image-modal-spinner { + position: absolute; + top: -3px; + left: 0; + width: 100%; + height: 100%; + opacity: 0.5; +} +.rdw-image-modal-alt-input { + width: 70%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; + margin-left: 5px; +} +.rdw-image-modal-alt-input:focus { + outline: none; +} +.rdw-image-modal-alt-lbl { + font-size: 12px; +} +.rdw-image-modal-size { + align-items: center; + display: flex; + margin: 8px 0; + justify-content: space-between; +} +.rdw-image-modal-size-input { + width: 40%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; +} +.rdw-image-modal-size-input:focus { + outline: none; +} +.rdw-image-mandatory-sign { + color: red; + margin-left: 3px; + margin-right: 3px; +} + +.rdw-remove-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} + +.rdw-history-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-history-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-history-dropdown { + width: 50px; +} + +.rdw-link-decorator-wrapper { + position: relative; +} +.rdw-link-decorator-icon { + position: absolute; + left: 40%; + top: 0; + cursor: pointer; + background-color: white; +} + +.rdw-mention-link { + text-decoration: none; + color: #1236ff; + background-color: #f0fbff; + padding: 1px 2px; + border-radius: 2px; +} + +.rdw-suggestion-wrapper { + position: relative; +} +.rdw-suggestion-dropdown { + position: absolute; + display: flex; + flex-direction: column; + border: 1px solid #F1F1F1; + min-width: 100px; + max-height: 150px; + overflow: auto; + background: white; + z-index: 100; +} +.rdw-suggestion-option { + padding: 7px 5px; + border-bottom: 1px solid #f1f1f1; +} +.rdw-suggestion-option-active { + background-color: #F1F1F1; +} + +.rdw-hashtag-link { + text-decoration: none; + color: #1236ff; + background-color: #f0fbff; + padding: 1px 2px; + border-radius: 2px; +} + +.rdw-image-alignment-options-popup { + position: absolute; + background: white; + display: flex; + padding: 5px 2px; + border-radius: 2px; + border: 1px solid #F1F1F1; + width: 105px; + cursor: pointer; + z-index: 100; +} +.rdw-alignment-option-left { + justify-content: flex-start; +} +.rdw-image-alignment-option { + height: 15px; + width: 15px; + min-width: 15px; +} +.rdw-image-alignment { + position: relative; +} +.rdw-image-imagewrapper { + position: relative; +} +.rdw-image-center { + display: flex; + justify-content: center; +} +.rdw-image-left { + display: flex; +} +.rdw-image-right { + display: flex; + justify-content: flex-end; +} +.rdw-image-alignment-options-popup-right { + right: 0; +} + +.rdw-editor-main { + height: 100%; + overflow: auto; + box-sizing: border-box; +} +.rdw-editor-toolbar { + padding: 6px 5px 0; + border-radius: 2px; + border: 1px solid #F1F1F1; + display: flex; + justify-content: flex-start; + background: white; + flex-wrap: wrap; + font-size: 15px; + margin-bottom: 5px; + user-select: none; +} +.public-DraftStyleDefault-block { + margin: 1em 0; +} +.rdw-editor-wrapper:focus { + outline: none; +} +.rdw-editor-wrapper { + box-sizing: content-box; +} +.rdw-editor-main blockquote { + border-left: 5px solid #f1f1f1; + padding-left: 5px; + background-color: red; +} +.rdw-editor-main pre { + background: red; + border-radius: 30px; + padding: 1px 10px; +} +/** + * Draft v0.9.1 + * + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:300px;text-align:right;background-color: white ;padding: 0px 5px;}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:right}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:right}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin: 0px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4} + + +/*# sourceMappingURL=react-draft-wysiwyg.css.map*/ \ No newline at end of file diff --git a/src/view/addProduct/Main/index.js b/src/view/addProduct/Main/index.js new file mode 100644 index 0000000..59317de --- /dev/null +++ b/src/view/addProduct/Main/index.js @@ -0,0 +1,29 @@ +import React from "react"; +import { Editor } from "react-draft-wysiwyg"; +import AddPic from "../components/addPic"; +import './editor.css'; + +const MainAP = () => { + return ( +
تصویر شاخص
*/} +