/src/tests"],
3 | transform: {
4 | "^.+\\.tsx?$": "ts-jest",
5 | },
6 | preset: "ts-jest",
7 | testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
8 | moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "d.ts"],
9 | "moduleNameMapper": {
10 | "^.+\\.(css|less|scss)$": "identity-obj-proxy"
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rc-highlight",
3 | "version": "1.0.1",
4 | "description": "React component for highlighting js and jsx code",
5 | "main": "./build/index.js",
6 | "module": "./build/index.es.js",
7 | "types": "./build/index.d.ts",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/JinSSJ3/rc-highlight.git"
11 | },
12 | "keywords": [
13 | "highlight",
14 | "highlight.js",
15 | "react",
16 | "syntax",
17 | "typescript",
18 | "copy",
19 | "clipboard",
20 | "front-end"
21 | ],
22 | "author": "JinSSJ3",
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/JinSSJ3/rc-highlight/issues"
26 | },
27 | "homepage": "https://github.com/JinSSJ3/rc-highlight#readme",
28 | "dependencies": {},
29 | "peerDependencies": {
30 | "react": "^17.0.1",
31 | "react-dom": "^17.0.1"
32 | },
33 | "devDependencies": {
34 | "@babel/core": "^7.11.6",
35 | "@rollup/plugin-commonjs": "^19.0.0",
36 | "@rollup/plugin-node-resolve": "^13.0.6",
37 | "@storybook/addon-actions": "^6.2.9",
38 | "@storybook/addon-links": "^6.0.22",
39 | "@storybook/addons": "^6.3.12",
40 | "@storybook/preset-scss": "^1.0.3",
41 | "@storybook/react": "^6.0.22",
42 | "@testing-library/jest-dom": "^5.15.1",
43 | "@testing-library/react": "^12.1.2",
44 | "@types/jest": "^27.0.3",
45 | "@types/node": "^14.11.2",
46 | "@types/testing-library__jest-dom": "^5.14.1",
47 | "@types/testing-library__react": "^10.2.0",
48 | "@typescript-eslint/eslint-plugin": "^4.3.0",
49 | "@typescript-eslint/parser": "^4.33.0",
50 | "babel-loader": "^8.1.0",
51 | "coveralls": "^3.1.1",
52 | "css-loader": "^5.1.3",
53 | "eslint": "^7.10.0",
54 | "eslint-config-prettier": "^8.1.0",
55 | "eslint-plugin-jest": "^24.0.2",
56 | "eslint-plugin-prettier": "^3.1.4",
57 | "eslint-plugin-react": "^7.21.2",
58 | "fork-ts-checker-webpack-plugin": "^6.4.2",
59 | "identity-obj-proxy": "^3.0.0",
60 | "jest": "^26.4.2",
61 | "prettier": "^2.3.0",
62 | "rollup": "^2.41.2",
63 | "rollup-plugin-peer-deps-external": "^2.2.3",
64 | "rollup-plugin-sass": "^1.2.9",
65 | "rollup-plugin-terser": "^7.0.2",
66 | "rollup-plugin-typescript2": "^0.30.0",
67 | "sass-loader": "^12.1.0",
68 | "style-loader": "^2.0.0",
69 | "ts-jest": "^26.4.0",
70 | "ts-loader": "^9.2.1",
71 | "tslib": "^2.2.0",
72 | "typescript": "^4.0.3"
73 | },
74 | "scripts": {
75 | "storybook": "start-storybook -p 6006",
76 | "build-storybook": "build-storybook",
77 | "build": "rollup -c",
78 | "lint": "eslint src/*.tsx --quiet --fix",
79 | "test": "jest",
80 | "test:coveralls": "jest --coverage && coveralls < coverage/lcov.info"
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/postinstallSSJ.js:
--------------------------------------------------------------------------------
1 | console.log(
2 | '\x1b[36m%s\x1b[34m%s\x1b[0m',
3 | '**************************************************************************************\n'+
4 | '*** UNLIMITED REACT COMPONENTS ***\n'+
5 | '*** HIGHLIGHT JSX CODE ***\n'+
6 | '*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*//*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*\n'
7 | );
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import resolve from "@rollup/plugin-node-resolve";
3 | import peerDepsExternal from "rollup-plugin-peer-deps-external";
4 | import typescript from "rollup-plugin-typescript2";
5 | import sass from "rollup-plugin-sass";
6 | import packageJson from "./package.json";
7 | import { terser } from "rollup-plugin-terser";
8 |
9 | export default {
10 | input: "./src/index.ts",
11 | output: [
12 | {
13 | file: packageJson.main,
14 | format: "cjs",
15 | sourcemap: true,
16 | },
17 | {
18 | file: packageJson.module,
19 | format: "esm",
20 | sourcemap: true,
21 | },
22 | ],
23 | plugins: [
24 | sass({ insert: true }),
25 | peerDepsExternal(),
26 | resolve(),
27 | commonjs(),
28 | typescript(),
29 | terser(),
30 | ],
31 | };
32 |
--------------------------------------------------------------------------------
/src/Components/ClipBoard.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState } from "react";
2 |
3 | import Done from "../Icons/Done";
4 | import Copy from "../Icons/Copy";
5 |
6 | const Clipboard = ({
7 | code = "no code",
8 | onCopyToClipboard = (_code: string) => {},
9 | }) => {
10 | //const { code = "no code" } = props;
11 | const [copied, setCopied] = useState(false);
12 | const changeIcon = () => {
13 | setCopied(true);
14 | setTimeout(() => {
15 | setCopied(false);
16 | }, 2800);
17 | };
18 | function fallbackCopyTextToClipboard(text: string) {
19 | var textArea = document.createElement("textarea");
20 | textArea.value = text;
21 |
22 | // Avoid scrolling to bottom
23 | textArea.style.top = "0";
24 | textArea.style.left = "0";
25 | textArea.style.position = "fixed";
26 |
27 | document.body.appendChild(textArea);
28 | textArea.focus();
29 | textArea.select();
30 |
31 | try {
32 | var successful = document.execCommand("copy");
33 | var msg = successful ? "successful" : "unsuccessful";
34 | if (successful) {
35 | changeIcon();
36 | onCopyToClipboard?.(code);
37 | }
38 | console.log("Fallback: Copying text command was " + msg);
39 | } catch (err) {
40 | console.error("Fallback: Oops, unable to copy", err);
41 | }
42 |
43 | document.body.removeChild(textArea);
44 | }
45 | function copyTextToClipboard(text: string) {
46 | if (!navigator.clipboard) {
47 | fallbackCopyTextToClipboard(text);
48 | return;
49 | }
50 | navigator.clipboard.writeText(text).then(
51 | function () {
52 | changeIcon();
53 | onCopyToClipboard?.(code);
54 |
55 | console.log("Async: Copying to clipboard was successful!");
56 | },
57 | function (err) {
58 | console.error("Async: Could not copy text: ", err);
59 | },
60 | );
61 | }
62 |
63 | return (
64 |
65 | copyTextToClipboard(code)}
67 | className={
68 | copied ? "floating-copy-button copied" : "floating-copy-button"
69 | }
70 | >
71 | {copied ? : }
72 |
73 |
74 | );
75 | };
76 | export default Clipboard;
77 |
--------------------------------------------------------------------------------
/src/Components/HighLighterProps.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export interface HighLighterProps {
4 | /**
5 | * The JSX code to highlight
6 | */
7 | code: string;
8 | /**
9 | * at the moment only JSX and JS is supported
10 | */
11 | //language?: string;
12 | /**
13 | * style properties that affects only the container
14 | */
15 | style?: React.CSSProperties;
16 | /**
17 | * style properties that affects only the container
18 | */
19 | children?: string;
20 | /**
21 | * event that is triggered when copy to clipboard the code
22 | */
23 | onCopyToClipboard?:(code:string)=>void
24 | }
--------------------------------------------------------------------------------
/src/Components/Highlighter.scss:
--------------------------------------------------------------------------------
1 | .highlighter-container {
2 | background: #0d1117;
3 | color: rgb(255, 255, 255);
4 | border-radius: 10px;
5 | overflow: auto;
6 | line-height: 1.15;
7 | //-moz-tab-size: 1.5em;
8 | --banner-display: none;
9 | --banner-height-normal: 0px;
10 | --banner-height-small: 0px;
11 | margin: 0;
12 | padding: 0;
13 | min-width: 200px;
14 | width: 100%;
15 | overflow: auto;
16 | position: relative;
17 | .floating-copy-button {
18 | cursor: pointer;
19 | &:hover {
20 | background-color: rgba(255, 255, 255, 0.504);
21 | border: 1px solid white;
22 | padding: 7px;
23 | }
24 | &.copied {
25 | border: 1px solid greenyellow;
26 | padding: 7px;
27 |
28 | &:hover {
29 | border: 1px solid greenyellow;
30 |
31 | background-color: rgba(53, 116, 34, 0.753);
32 |
33 | padding: 7px;
34 | }
35 | }
36 | position: absolute;
37 | padding: 8px;
38 | right: 7px;
39 | top: 7px;
40 | border-radius: 8px;
41 | background-color: rgba(255, 255, 255, 0.404);
42 | box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
43 | 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
44 | }
45 | }
46 | .highlighter-container::after {
47 | box-sizing: inherit;
48 | }
49 | .highlighter-container::before {
50 | box-sizing: inherit;
51 | }
52 | .highlighter-jsx {
53 | min-width: 600px;
54 | width: 100%;
55 | overflow: auto;
56 | height: auto !important;
57 | margin: 1rem;
58 | font-size: 14px;
59 | line-height: 20px;
60 | white-space: pre-wrap;
61 | //word-break: break-word;
62 | }
63 | code,
64 | pre {
65 | line-height: 20px;
66 | white-space: pre-wrap;
67 | word-break: break-word;
68 | font-size: 1em;
69 | font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
70 | }
71 | span.token {
72 | // color: rgb(57, 188, 240);
73 | color: rgb(96, 210, 255);
74 | }
75 | span.token.symbol-1 {
76 | color: rgb(207, 178, 13);
77 | }
78 | span.token.symbol-2 {
79 | color: rgb(212, 37, 212);
80 | }
81 | span.token.symbol-3 {
82 | color: rgb(51, 141, 177);
83 | }
84 | span.token.symbol-0 {
85 | color: rgb(14, 36, 83);
86 | }
87 | span.token.symbol {
88 | color: rgb(207, 178, 13);
89 | }
90 | span.token.high-keyword {
91 | color: rgb(196, 92, 196);
92 | }
93 |
94 | span.token.keyword {
95 | color: rgb(51, 91, 177);
96 | }
97 |
98 | span.token.class-name {
99 | color: rgb(94, 212, 157);
100 | }
101 | span.token.punctuation {
102 | color: rgba(255, 255, 255, 0.58);
103 | }
104 | span.token.function {
105 | color: rgb(226, 212, 135);
106 | }
107 | span.token.parameter {
108 | color: rgb(96, 210, 255);
109 | }
110 | span.token.operator {
111 | color: rgb(255, 255, 255);
112 | }
113 | span.token.number {
114 | color: rgb(80, 223, 67);
115 | }
116 | span.token.attributeName {
117 | color: rgb(36, 117, 138);
118 | }
119 | span.token.tag {
120 | color: rgb(252, 146, 158);
121 | }
122 |
123 | span.token.string {
124 | color: rgb(168, 109, 91);
125 | }
126 |
127 | span.token.comment {
128 | color: rgb(73, 128, 66);
129 | }
130 |
--------------------------------------------------------------------------------
/src/Components/Highlighter.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from "react";
2 | import { useEffect } from "react";
3 | import { useState } from "react";
4 | import Clipboard from "./ClipBoard";
5 |
6 | import "./Highlighter.scss";
7 | import { HighLighterProps } from "./HighLighterProps";
8 | import {
9 | Line,
10 | Token,
11 | superHighlighter,
12 | isOpenSymbol,
13 | isCloseSymbol,
14 | } from "./utils.highlight";
15 |
16 | const HighLighter = (props: HighLighterProps) => {
17 | const { code, style, children ,onCopyToClipboard} = props;
18 | //const [bracketLevel, setBracketLevel] = useState(0);
19 | // const [commentBlock, setCommentBlock] = useState(false);
20 | const [codeHighlighted, setCodeHighlighted] = useState(<>);
21 | useEffect(() => {
22 | if (children && children.length > 0) {
23 | tokenize(children);
24 | } else {
25 | tokenize(code || "");
26 | }
27 | }, [code, children]);
28 | const tokenize = (code: string): void | React.ReactNode => {
29 | let listOfLines: Line[] = superHighlighter(code);
30 |
31 | let listOfCode: React.ReactNode[] = [];
32 | for (let i = 0; i < listOfLines.length; i++) {
33 | let tokenList: Token[] = listOfLines[i];
34 | let lineSpan: React.ReactNode = tokenizeSpan(tokenList, i);
35 | listOfCode.push(lineSpan);
36 | }
37 |
38 | setCodeHighlighted(
39 | {listOfCode.map((codeLine) => codeLine)}
40 | );
41 |
42 | //return {listOfCode.map((codeLine) => codeLine)};
43 | };
44 | //const setLevelOfSymbol = (token: Token) => {};
45 | /* findBlockComment = (tokenList: Token[], j: number) => {
46 | let token: Token = tokenList[j];
47 | if (
48 | token.token === "/" &&
49 | tokenList[j + 1]?.token === "" &&
50 | tokenList[j + 2]?.token === "*"
51 | ) {
52 | // setCommentBlock(true);
53 | }
54 | };*/
55 | /*const findFinalBlockComment = (tokenList: Token[], j: number) => {
56 | let token: Token = tokenList[j];
57 | if (
58 | token.token === "/" &&
59 | tokenList[j - 1]?.token === "" &&
60 | tokenList[j - 2]?.token === "*"
61 | ) {
62 | //setCommentBlock(false);
63 | }
64 | };*/
65 | let commentBlock: boolean = false;
66 | let levelBracket: number = 1;
67 | let openBrackets: number = 0;
68 | function reduceOpenBrackets() {
69 | if (openBrackets !== 0) {
70 | openBrackets -= 1;
71 | }
72 | }
73 | function incBrack() {
74 | if (levelBracket !== 3) {
75 | levelBracket += 1;
76 | } else {
77 | levelBracket = 1;
78 | }
79 | }
80 | function decBrack() {
81 | levelBracket -= 1;
82 | if (levelBracket === 0) {
83 | levelBracket = 3;
84 | }
85 | }
86 | function levelbefore(__levelBracket: number) {
87 | let _levelBracket = __levelBracket - 1;
88 | if (_levelBracket === 0) {
89 | _levelBracket = 3;
90 | }
91 | return _levelBracket;
92 | }
93 | const tokenizeSpan = (tokenList: Token[], key: number): React.ReactNode => {
94 | let result: React.ReactNode;
95 | //for each line I create a div
96 | //for each token create a span
97 | let listOfSpans: React.ReactNode[] = [];
98 | //let block: boolean = commentBlock;
99 | //console.log("found found ", block);
100 | for (let j = 0; j < tokenList.length; j++) {
101 | let spanClassName = "token";
102 | let token: Token = tokenList[j];
103 | /* if(!commentBlock){
104 | findBlockComment(tokenList,j);
105 | } */
106 | if (
107 | !commentBlock &&
108 | token.token === "/" &&
109 | //tokenList[j + 1]?.token === "" &&
110 | tokenList[j + 2]?.token === "*"
111 | ) {
112 | commentBlock = true;
113 | }
114 |
115 | ////
116 | if (isCloseSymbol(token.token)) {
117 | reduceOpenBrackets();
118 | spanClassName = `token symbol-${levelbefore(levelBracket)}`;
119 | decBrack();
120 | // console.log( "Log:" + token.token, "level: " + levelBracket, "openBrac: " + openBrackets, spanClassName );
121 | } else if (isOpenSymbol(token.token)) {
122 | openBrackets++;
123 | spanClassName = `token symbol-${levelBracket}`;
124 | incBrack();
125 | // console.log( "Log:" + token.token, "level: " + levelBracket, "openBrac: " + openBrackets, spanClassName );
126 | } else if (token.category !== "") {
127 | spanClassName += ` ${token.category}`;
128 | }
129 | if (token.token.length > 0) {
130 | listOfSpans.push(
131 |
135 | {token.token}
136 |
137 | );
138 | }
139 |
140 | if (
141 | commentBlock &&
142 | token.token === "/" &&
143 | tokenList[j - 1]?.token === "" &&
144 | tokenList[j - 2]?.token === "*"
145 | ) {
146 | commentBlock = false;
147 | }
148 | }
149 |
150 | result = {listOfSpans.map((spanToken) => spanToken)}
;
151 | return result;
152 | };
153 | //const codeHighlighted = tokenize(code || "");
154 | const handleCopyToClipboard=(_code:string)=>{
155 | onCopyToClipboard?.(_code);
156 | }
157 | return (
158 |
159 | {(children || code) &&
160 | (code?.length > 0 || (children as string).length > 0) && (
161 |
166 |
167 |
168 | <>{codeHighlighted}
169 |
170 | )}
171 |
172 | );
173 | };
174 |
175 | export default HighLighter;
176 |
--------------------------------------------------------------------------------
/src/Components/utils.highlight.ts:
--------------------------------------------------------------------------------
1 |
2 | export type CodeLine = JSX.Element;
3 | export type Line = Token[];
4 |
5 | export interface Token {
6 | token: string;
7 | category: string;
8 | level?: 1 | 2 | 3 | 0;
9 | }
10 | const highKeywords = [
11 | "import",
12 | "from",
13 | "return",
14 | "if",
15 | "else",
16 | "switch",
17 | "default",
18 | "export",
19 | ]
20 | const keywords = [
21 | "class",
22 | "extends",
23 | "this",
24 | "super",
25 | "function",
26 | "null",
27 | "var",
28 | "let",
29 | "const",
30 | "typeof",
31 | "interface",
32 | "type", "false"
33 | ];
34 | export const tokens = [
35 | "keyword",
36 | "className",
37 | "punctuation",
38 | "function",
39 | "parameter",
40 | "operator",
41 | "number",
42 | "attributeName",
43 | "default",
44 | ];
45 | const punctuation: string[] = [
46 | ".",
47 | ",",
48 | ";",
49 | ":",
50 | "<",
51 | ">",
52 | "=",
53 | "!=",
54 | "<=",
55 | ">=",
56 | "===",
57 | "!==",
58 | ">=",
59 | "/",
60 | "!",
61 | "+",
62 | "*"
63 | ];
64 | const arrow: string[] = [
65 | ">=",
66 | "=>",
67 | "<=",
68 | "!=",
69 | "===",
70 | "!==",
71 | ">=",
72 | "!"
73 | ]
74 | const openSymbols: string[] = [
75 | "(",
76 | "{",
77 | "[",
78 | ];
79 | const closeSymbols: string[] = [
80 | ")",
81 | "}",
82 | "]",
83 | ];
84 |
85 | export const isClassName = (word: string) => {
86 | return /[A-Z]/.test(word[0]);
87 | };
88 | export const isHighKeyWord = (word: string) => {
89 | return highKeywords.includes(word);
90 | };
91 | export const isKeyWord = (word: string) => {
92 | return keywords.includes(word);
93 | };
94 | export const isPunctuation = (word: string) => {
95 | return punctuation.includes(word);
96 | };
97 | export const isArrow = (word: string) => {
98 | return arrow.includes(word);
99 | };
100 | export const isOpenSymbol = (word: string) => {
101 | return openSymbols.includes(word);
102 | };
103 | export const isCloseSymbol = (word: string) => {
104 | return closeSymbols.includes(word);
105 | };
106 | /**
107 | * Makes a Token
108 | * @param token the string representation of the token
109 | * @param category the category of the token
110 | * @param isFunction wheter is a function and must take this category
111 | * @param openString wheter is part of a large splted string and must take this category
112 | * @returns a token
113 | */
114 | export const makeToken = (
115 | token: string,
116 | category: string,
117 | isFunction?: boolean,
118 | openString?: boolean
119 | ): Token => {
120 | let tokenToken: Token;
121 |
122 | if (openString) {
123 | tokenToken = { token: token, category: "string" };
124 | }
125 | else if (isFunction) {
126 | tokenToken = { token: token, category: "function" };
127 | } else {
128 | tokenToken = { token: token, category: category };
129 |
130 | }
131 | //console.log("make:", tokenToken);
132 | return tokenToken;
133 | }
134 | /**
135 | * @var a flag used to check whether a large splited string is being analyzed
136 | */
137 | let openString: boolean = false;
138 | /**
139 | *
140 | * @param word a word to be analized for punctuation and strings
141 | * @returns
142 | */
143 | export const TOKENIZE = (
144 | currentWord: string
145 | ): Token[] => {
146 | let tokenArray: Token[] = [];
147 | //identif string
148 | //for each character
149 | let acumword = "";
150 | let isFunction = false;
151 | let i = 0;
152 | // in the future search for the pattern
153 | // string = `${var} `
154 | // symbol symbol parameter symbol
155 | if (currentWord.charAt(0) === "\"" || currentWord.charAt(0) === "\'" || currentWord.charAt(0) === "\`") {
156 | let tokenPrev: Token = makeToken(currentWord, "string");
157 | return [tokenPrev];
158 | }
159 | for (; i < currentWord.length; i++) {
160 | //go along in chars
161 | let currentCharacter = currentWord.charAt(i);
162 |
163 | if (isPunctuation(currentCharacter)) {
164 | //PUNCTUATION
165 |
166 | let tokenPrev: Token =
167 | makeToken(acumword, "", false, openString);
168 | tokenArray.push(tokenPrev);
169 | acumword = "";
170 |
171 | if (currentCharacter === "." && tokenArray[tokenArray.length - 1].token.length > 0) {
172 | //I found an object and a function
173 | isFunction = true;
174 | tokenArray[tokenArray.length - 1].category = "parameter";
175 | tokenArray[tokenArray.length - 1].token = tokenArray[tokenArray.length - 1].token.split(" ")[0];
176 | }
177 |
178 | // Now I add the "."
179 | let token: Token = //{ token: currentCharacter, category: "punctuation" };
180 | makeToken(currentCharacter, "punctuation", false, openString);
181 | tokenArray.push(token);
182 | } else if (isCloseSymbol(currentCharacter) || isOpenSymbol(currentCharacter)) {
183 | // SYMBOL
184 | let tokenPrev: Token = //{ token: acumword + " ", category: "" };
185 | makeToken(acumword, "", isFunction, openString);
186 | tokenArray.push(tokenPrev);
187 | acumword = "";
188 |
189 | if (currentCharacter === "(" && tokenArray[tokenArray.length - 1].token.length > 0) {
190 | tokenArray[tokenArray.length - 1].category = "function";
191 | }
192 |
193 | let token: Token = //{ token: currentCharacter, category: "symbol" };
194 | makeToken(currentCharacter, "symbol", false, openString);
195 | tokenArray.push(token);
196 | } else {
197 | // SIMPLE WORD
198 | //continue accumulating
199 | acumword += currentCharacter;
200 | }
201 | }
202 | let tokenPrev: Token = { token: acumword, category: "" };
203 | makeToken(acumword, "", isFunction);
204 | tokenArray.push(tokenPrev);
205 | //check for functions
206 | for (let i = 0; i < tokenArray.length - 1; i++) {
207 | if (tokenArray[i].token.includes(".") && tokenArray[i + 1].token === "") {
208 | tokenArray[i + 1].category = "function";
209 | }
210 | }
211 | return tokenArray;
212 | }
213 | /**
214 | *
215 | * @param line
216 | * @returns
217 | */
218 | export const tokenizeLine = (
219 | line: string
220 | ): Line => {
221 | let tokenArray: Token[] = [];
222 |
223 | //separate for whitespaces
224 | let words: string[];//= line.split(" ");
225 | // console.log("===>",words);
226 | let superWords: string[] = [];
227 | let strSymbol: string = "";
228 | let acumWord = "";
229 | for (let i = 0; i < line.length; i++) {
230 | let currentChar = line[i];
231 |
232 | if (currentChar === "\"" || currentChar === "\'" || currentChar === "\`") {
233 | strSymbol = currentChar;
234 | if (acumWord.length > 0) {
235 | superWords.push(acumWord);
236 | //console.log("wors", acumWord,currentChar);
237 | acumWord = "";
238 | }
239 | //better capture the entire string
240 | acumWord += currentChar;
241 | let j = i + 1;
242 | while (1) {
243 | let currentChar2 = line[j];
244 | if (currentChar2 === strSymbol) {
245 | acumWord += currentChar2;
246 | superWords.push(acumWord);
247 | // console.log("wors", acumWord,currentChar);
248 | acumWord = "";
249 | break;
250 | } else {
251 | acumWord += currentChar2;
252 | j++;
253 | }
254 | }
255 | i = j;
256 | } else if (currentChar === " ") {
257 | //console.log("ws");
258 | superWords.push(acumWord);
259 | acumWord = "";
260 | //console.log("words", acumWord,currentChar);
261 | superWords.push(" ");
262 | acumWord = "";
263 |
264 | //i=i+2;
265 | } else if (currentChar.length === 0) {
266 | //console.log("empty");
267 | //acumWord += " ";
268 | } else {
269 | acumWord += currentChar;
270 | }
271 |
272 | }
273 | superWords.push(acumWord);
274 | words = superWords;
275 |
276 | //for each word
277 | for (let i = 0; i < words.length; i++) {
278 | // a word aftersplited by " "
279 | let currentWord = words[i];
280 | if (isKeyWord(currentWord)) {
281 | let tokenPrev: Token = { token: currentWord, category: "keyword" };
282 | // makeToken( currconsoleentWord + " ","",isFunction);
283 | tokenArray.push(tokenPrev);
284 | } else if (isHighKeyWord(currentWord)) {
285 | let tokenPrev: Token = { token: currentWord, category: "high-keyword" };
286 | //makeToken( currentWord + " ","",isFunction);
287 | tokenArray.push(tokenPrev);
288 | } else if (isArrow(currentWord)) {
289 | let tokenPrev: Token = { token: currentWord, category: "punctuation" };
290 | //makeToken( currentWord + " ","",isFunction);
291 | tokenArray.push(tokenPrev);
292 | } else {
293 | //punctuation
294 | tokenArray = [...tokenArray, ...TOKENIZE(currentWord)];
295 | }
296 | }
297 | for (let i = 0; i < tokenArray.length; i++) {
298 | if (tokenArray[i].token === "/") {
299 |
300 | if (tokenArray[i + 1] && tokenArray[i + 2] && tokenArray[i + 2].token === "/") {
301 |
302 | for (let j = i; j < tokenArray.length; j++) {
303 | tokenArray[j].category = "comment";
304 | }
305 | break;
306 | }
307 | }
308 |
309 | }
310 |
311 | //go along tokens array and find classes
312 | for (let i = 0; i < tokenArray.length; i++) {
313 | let token: Token = tokenArray[i];
314 | if (isClassName(token.token)) {
315 | let j = i - 1;
316 | while (1) {
317 | if (tokenArray[j].token !== " " && j > 0) {
318 | break;
319 | }
320 | j--;
321 | }
322 | if (j >= 0 && tokenArray[j].token === "import") {
323 | token.category = "parameter";
324 | } else if (j >= 0 && (["const", "function"].includes(tokenArray[j].token))) {
325 | token.category = "function";
326 | } else {
327 | token.category = "class-name";
328 | }
329 | }
330 | if ("<" == (token.token)) {
331 | if (tokenArray[i + 1]) {
332 | tokenArray[i + 1].category = "tag";
333 | }
334 | }
335 | if ("<" == (token.token) && tokenArray[i + 1] && tokenArray[i + 2] && tokenArray[i + 2].token === "/") {
336 | if (tokenArray[i + 3]) {
337 | tokenArray[i + 3].category = "tag";
338 | }
339 | }
340 | }
341 |
342 |
343 | return tokenArray;
344 | }
345 | /**
346 | * Splits the code into lines
347 | *
348 | * For each line first splits by punctuation and strings
349 | * Also maintains whitespaces
350 | *
351 | * After that, searchs for keywords
352 | *
353 | * Tags with Classes and HTML-tags
354 | * @param code The entie code to be highlighted
355 | */
356 | export const superHighlighter = (
357 | code: string
358 | ): Line[] => {
359 |
360 |
361 | //split in lines
362 | const lines: string[] = code.split("\n");
363 |
364 | //separate by punctuation
365 | let punctuationSeparated: Line[] = [];
366 |
367 | //For each line tokenize
368 | for (let i = 0; i < lines.length; i++) {
369 | let currentLine = lines[i];
370 | let tokenArray = tokenizeLine(currentLine);
371 |
372 | punctuationSeparated.push(tokenArray);
373 | }
374 |
375 | return punctuationSeparated;
376 | }
377 |
378 |
379 |
--------------------------------------------------------------------------------
/src/Icons/Copy.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import { copyProps } from "./CopyProps";
3 | import { parseSize } from "./utils/utils";
4 |
5 | const Copy: FC = (props: copyProps) => {
6 | const { size, color, colorFill = "none", onClick, style, className } = props;
7 | const finalSize = parseSize(size);
8 | const finalStyle = style ? style : {};
9 | return (
10 |
24 | );
25 | };
26 | export default Copy;
27 |
--------------------------------------------------------------------------------
/src/Icons/CopyProps.ts:
--------------------------------------------------------------------------------
1 | import { IconProps } from "./IconProps";
2 |
3 | export interface copyProps extends IconProps{}
--------------------------------------------------------------------------------
/src/Icons/Done.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import { DoneProps } from "./DoneProps";
3 | import { parseSize } from "./utils/utils";
4 |
5 | const Done: FC = (props: DoneProps) => {
6 | const {
7 | size,
8 | color,
9 | colorFill = "none",
10 | onClick,
11 | style = {},
12 | className,
13 | } = props;
14 | const finalSize = parseSize(size);
15 | return (
16 |
30 | );
31 | };
32 | export default Done;
33 |
--------------------------------------------------------------------------------
/src/Icons/DoneProps.ts:
--------------------------------------------------------------------------------
1 | import { IconProps } from "./IconProps";
2 |
3 | export interface DoneProps extends IconProps{
4 |
5 | }
--------------------------------------------------------------------------------
/src/Icons/IconProps.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 |
3 | export interface IconProps {
4 | size?: "micro"|"small" |"semi-medium"| "medium" | "large";
5 | color?: string;
6 | colorFill?: string;
7 | onClick?: Function;
8 | style?:CSSProperties;
9 | className?:string;
10 | }
--------------------------------------------------------------------------------
/src/Icons/utils/utils.ts:
--------------------------------------------------------------------------------
1 | import { IconProps } from "../IconProps";
2 |
3 | export const parseSize = (sizeStr: IconProps["size"]): number => {
4 | switch (sizeStr) {
5 | case "micro":
6 | return 8;
7 | case "small":
8 | return 15;
9 | case "semi-medium":
10 | return 18;
11 | case "medium":
12 | return 25;
13 | case "large":
14 | return 28;
15 | default:
16 | return 24;
17 | }
18 | }
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import Highlighter from "./Components/Highlighter";
2 | import Clipboard from "./Components/ClipBoard";
3 |
4 | export {Highlighter, Clipboard};
--------------------------------------------------------------------------------
/src/tests/HighLighter.spec.tsx:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom";
2 |
3 | import React from "react";
4 | import { render, screen } from "@testing-library/react";
5 | import {
6 | isArrow,
7 | isClassName,
8 | isCloseSymbol,
9 | isHighKeyWord,
10 | isKeyWord,
11 | isOpenSymbol,
12 | isPunctuation,
13 | makeToken,
14 | Token,
15 | TOKENIZE,
16 | } from "../Components/utils.highlight";
17 | import HighLighter from "../Components/Highlighter";
18 | //import {HighLight} from "src/"
19 | const code_test1 = `
20 | //creating themes
21 | const themes = {
22 | light: {
23 | foreground: "#000000",
24 | background: "#eeeeee"
25 | },
26 | };
27 | /* this is a
28 | comment */
29 | .
30 | .
31 | .
32 | function ThemedButton() {
33 | const theme = useContext(ThemeContext);
34 | return (
35 |
41 | );
42 | }
43 | `;
44 |
45 | it('displays a "ThemedButton" message', () => {
46 | render();
47 | expect(screen.getByText("ThemedButton")).toBeInTheDocument();
48 | expect(screen.getByText("comment")).toBeInTheDocument();
49 | expect(screen.getByText("function")).toBeInTheDocument();
50 | expect(screen.getAllByText("themes").length).toEqual(2);
51 | expect(screen.getAllByText("background").length).toEqual(3);
52 | //expect(screen.getByText("background")).toBeInTheDocument();
53 | expect(screen.getByText("creating")).toBeInTheDocument();
54 | });
55 | describe("Validate css background", () => {
56 | it("background-color must be equal to #0d1117; by default", () => {
57 | const { getByTestId } = render();
58 | const HLcontainer = getByTestId("highlighter-container");
59 |
60 | expect(HLcontainer).toHaveStyle(`background-color : 0d1117`);
61 | });
62 |
63 | it("background-color must be equal to white in style object prop", () => {
64 | const { getByTestId } = render(
65 | ,
66 | );
67 | const HLcontainer = getByTestId("highlighter-container");
68 |
69 | expect(HLcontainer).toHaveStyle(`background-color : white`);
70 | });
71 | });
72 |
73 | describe("Validate identification functions for tokens", () => {
74 | it("Validate isClassName function", () => {
75 | const token: string = "ThemedButton";
76 |
77 | expect(isClassName(token)).toEqual(true);
78 | });
79 |
80 | it("Validate isHighKeyWord function", () => {
81 | const token: string = "import";
82 | const token2: string = "function";
83 |
84 | expect(isHighKeyWord(token)).toEqual(true);
85 | expect(isHighKeyWord(token2)).toEqual(false);
86 | });
87 |
88 | it("Validate isKeyWord function", () => {
89 | const token: string = "function";
90 | const token2: string = "import";
91 |
92 | expect(isKeyWord(token)).toEqual(true);
93 | expect(isKeyWord(token2)).toEqual(false);
94 | });
95 |
96 | it("Validate isPunctuation function", () => {
97 | const token: string = ".";
98 | const token2: string = "= >";
99 |
100 | expect(isPunctuation(token)).toEqual(true);
101 | expect(isPunctuation(token2)).toEqual(false);
102 | });
103 |
104 | it("Validate isArrow function", () => {
105 | const token: string = "=>";
106 | const token2: string = "= >";
107 |
108 | expect(isArrow(token)).toEqual(true);
109 | expect(isArrow(token2)).toEqual(false);
110 | });
111 | it("Validate isOpenSymbol function", () => {
112 | const token: string = "[";
113 | const token2: string = "}";
114 |
115 | expect(isOpenSymbol(token)).toEqual(true);
116 | expect(isOpenSymbol(token2)).toEqual(false);
117 | });
118 | it("Validate isCloseSymbol function", () => {
119 | const token: string = "}";
120 | const token2: string = "[";
121 |
122 | expect(isCloseSymbol(token)).toEqual(true);
123 | expect(isCloseSymbol(token2)).toEqual(false);
124 | });
125 | });
126 |
127 | describe("Validate makeToken function", () => {
128 | it("Validate whith default values ", () => {
129 | const token: Token = makeToken("function", "keyword");
130 | const compareToken: Token = {
131 | token: "function",
132 | category: "keyword",
133 | };
134 | expect(token).toEqual(compareToken);
135 | });
136 | it("Validate when isFunction is true ", () => {
137 | const token: Token = makeToken("function", "keyword", true);
138 | const compareToken: Token = {
139 | token: "function",
140 | category: "function",
141 | };
142 | expect(token).toEqual(compareToken);
143 | });
144 | it("Validate when openString is true ", () => {
145 | const token: Token = makeToken("function", "keyword", false, true);
146 | const compareToken: Token = {
147 | token: "function",
148 | category: "string",
149 | };
150 | expect(token).toEqual(compareToken);
151 | });
152 | });
153 |
154 | describe("Validate TOKENIZE function for make token[]", () => {
155 | it("Produces an exact array of tokens", () => {
156 | const currentWord: string = "\"This is a string\"";
157 | const expectedResult: Token[] = [
158 | { token: "\"This is a string\"", category: "string" },
159 | ];
160 | expect(TOKENIZE(currentWord)).toEqual(expectedResult);
161 |
162 | });
163 | });
164 |
--------------------------------------------------------------------------------
/stories/Highlight.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {Highligther} from "../src";
3 | import App from "../example/example";
4 | export default {
5 | title: "Highligther",
6 | component: Highligther,
7 | };
8 |
9 | export const Default = (): React.ReactNode => ;
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "declarationDir": "build",
5 | "module": "esnext",
6 | "target": "es5",
7 | "lib": ["es6", "dom", "es2016", "es2017"],
8 | "sourceMap": true,
9 | "jsx": "react",
10 | "moduleResolution": "node",
11 | "allowSyntheticDefaultImports": true,
12 | "esModuleInterop": true
13 | },
14 | "include": ["src/**/*"],
15 | "exclude": ["node_modules", "build"],
16 | "baseUrl": "./",
17 | }
18 |
--------------------------------------------------------------------------------
15 |