From 0ade9b0ad1c55e91688e0ed1cb674cb5fa5ac622 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Tue, 16 Nov 2021 13:08:37 +0100 Subject: [PATCH] Add Typography demo for React --- .../Extensions/Typography/React/index.html | 15 +++ .../src/Extensions/Typography/React/index.jsx | 18 ++++ .../Extensions/Typography/React/index.spec.js | 93 +++++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 demos/src/Extensions/Typography/React/index.html create mode 100644 demos/src/Extensions/Typography/React/index.jsx create mode 100644 demos/src/Extensions/Typography/React/index.spec.js diff --git a/demos/src/Extensions/Typography/React/index.html b/demos/src/Extensions/Typography/React/index.html new file mode 100644 index 00000000..2222e736 --- /dev/null +++ b/demos/src/Extensions/Typography/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Extensions/Typography/React/index.jsx b/demos/src/Extensions/Typography/React/index.jsx new file mode 100644 index 00000000..39ab8ea7 --- /dev/null +++ b/demos/src/Extensions/Typography/React/index.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import { useEditor, EditorContent } from "@tiptap/react"; +import Document from "@tiptap/extension-document"; +import Paragraph from "@tiptap/extension-paragraph"; +import Text from "@tiptap/extension-text"; +import Typography from "@tiptap/extension-typography"; + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, Typography], + content: ` +

“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”

+

— Erik Spiekermann, December 2008

+ `, + }); + + return ; +}; diff --git a/demos/src/Extensions/Typography/React/index.spec.js b/demos/src/Extensions/Typography/React/index.spec.js new file mode 100644 index 00000000..93a99394 --- /dev/null +++ b/demos/src/Extensions/Typography/React/index.spec.js @@ -0,0 +1,93 @@ +context("/src/Extensions/Typography/React/", () => { + before(() => { + cy.visit("/src/Extensions/Typography/React/"); + }); + + beforeEach(() => { + cy.get(".ProseMirror").then(([{ editor }]) => { + editor.commands.clearContent(); + }); + }); + + it("should make an em dash from two dashes", () => { + cy.get(".ProseMirror").type("-- emDash").should("contain", "— emDash"); + }); + + it("should make an ellipsis from three dots", () => { + cy.get(".ProseMirror").type("... ellipsis").should("contain", "… ellipsis"); + }); + + it("should make a correct open double quote", () => { + cy.get(".ProseMirror").type('"openDoubleQuote"').should("contain", "“openDoubleQuote"); + }); + + it("should make a correct close double quote", () => { + cy.get(".ProseMirror").type('"closeDoubleQuote"').should("contain", "closeDoubleQuote”"); + }); + + it("should make a correct open single quote", () => { + cy.get(".ProseMirror").type("'openSingleQuote'").should("contain", "‘openSingleQuote’"); + }); + + it("should make a correct close single quote", () => { + cy.get(".ProseMirror").type("'closeSingleQuote'").should("contain", "closeSingleQuote’"); + }); + + it("should make a left arrow", () => { + cy.get(".ProseMirror").type("<- leftArrow").should("contain", "← leftArrow"); + }); + + it("should make a right arrow", () => { + cy.get(".ProseMirror").type("-> rightArrow").should("contain", "→ rightArrow"); + }); + + it("should make a copyright sign", () => { + cy.get(".ProseMirror").type("(c) copyright").should("contain", "© copyright"); + }); + + it("should make a registered trademark sign", () => { + cy.get(".ProseMirror") + .type("(r) registeredTrademark") + .should("contain", "® registeredTrademark"); + }); + + it("should make a trademark sign", () => { + cy.get(".ProseMirror").type("(tm) trademark").should("contain", "™ trademark"); + }); + + it("should make a one half", () => { + cy.get(".ProseMirror").type("1/2 oneHalf").should("contain", "½ oneHalf"); + }); + + it("should make a plus/minus sign", () => { + cy.get(".ProseMirror").type("+/- plusMinus").should("contain", "± plusMinus"); + }); + + it("should make a not equal sign", () => { + cy.get(".ProseMirror").type("!= notEqual").should("contain", "≠ notEqual"); + }); + + it("should make a laquo", () => { + cy.get(".ProseMirror").type("<< laquorow").should("contain", "« laquo"); + }); + + it("should make a raquo", () => { + cy.get(".ProseMirror").type(">> raquorow").should("contain", "» raquo"); + }); + + it("should make a multiplication sign from an asterisk", () => { + cy.get(".ProseMirror").type("1*1 multiplication").should("contain", "1×1 multiplication"); + }); + + it("should make a multiplication sign from an x", () => { + cy.get(".ProseMirror").type("1x1 multiplication").should("contain", "1×1 multiplication"); + }); + + it("should make a multiplication sign from an asterisk with spaces", () => { + cy.get(".ProseMirror").type("1 * 1 multiplication").should("contain", "1 × 1 multiplication"); + }); + + it("should make a multiplication sign from an x with spaces", () => { + cy.get(".ProseMirror").type("1 x 1 multiplication").should("contain", "1 × 1 multiplication"); + }); +});