@khanacademy/math-input 0.4.1 → 0.5.2

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @khanacademy/math-input
+
+## 0.5.2
+
+### Patch Changes
+
+-   a15b0e86: Add 'perseus-build-settings' as a dev dep to packages that were missing it
+
+## 0.5.1
+
+### Patch Changes
+
+-   591420a6: Add @flow comment to math-input's index.js and missing props to ProvidedKeypad
+
+## 0.5.0
+
+### Minor Changes
+
+-   ea57be17: Move math-input into khan/perseus repo (name changes to @khanacademy/math-input)
+-   116df39b: Extract math-input strings from source and save them to packages/math-input/dist

package/README.md

@@ -1,6 +1,6 @@
 # math-input
 
-Khan Academy's new expression editor for the mobile web. Used in the [Perseus](https://github.com/khan/perseus) exercise framework to power math input and expression editing on small screens.
+Khan Academy's expression editor for the mobile web. Used in the [Perseus](https://github.com/khan/perseus) exercise framework to power math input and expression editing on small screens.
 
 Built with [React](https://github.com/facebook/react), [Redux](https://github.com/reactjs/redux), [MathQuill](https://github.com/mathquill/mathquill), [Aphrodite](https://github.com/khan/aphrodite), and more.
 

package/{build/math-input.css → dist/es/index.css}

@@ -9,38 +9,6 @@
  * If the animation durations change, the corresponding values in
  * echo-manager.js must change as well.
  */
-.echo-slide-and-fade-enter {
-  opacity: 1 !important;
-  transform: translate3d(0, 0, 0) !important;
-}
-.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
-  opacity: 0 !important;
-  transform: translate3d(0, -33%, 0) !important;
-  /**
-         * TODO(charlie): These times are intentionally different, which means
-         * that the animation really "ends" after 400ms
-         * cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
-         * the transform doesn't complete. There's probably a way to achieve the
-         * same effect by manipulating the transform's Bezier curve and total
-         * displacement.
-         */
-  transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
-}
-.echo-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-fade-only-enter.echo-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
-}
-.echo-long-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
-}
-
 /*
  * MathQuill v0.10.1               http://mathquill.com
  * by Han, Jeanine, and Mary  maintainers@mathquill.com
@@ -476,18 +444,6 @@
   filter: progid:DXImageTransform.Microsoft.Chroma(color='white');
   margin-top: -0.1em;
 }
-
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * echo-manager.js must change as well.
- */
 .echo-slide-and-fade-enter {
   opacity: 1 !important;
   transform: translate3d(0, 0, 0) !important;
@@ -628,109 +584,3 @@
 .tabbar_item:focus {
   background-color: green;
 }
-
-.keypad-input {
-  outline: none !important;
-}
-.keypad-input .mq-editable-field .mq-root-block {
-  overflow-x: scroll;
-}
-.keypad-input .mq-editable-field .mq-cursor:not(:only-child),
-.keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
-  /* HACK(charlie): Magic numbers to properly size and position the vertical
-               cursor, which is visible whenever the cursor is not alone in its parent,
-               with the exception that it's also visible when the entire input is
-               empty. */
-  height: 20px !important;
-  width: 2px;
-  margin-top: -5px !important;
-  vertical-align: middle !important;
-  border-radius: 1px !important;
-}
-.keypad-input .mq-editable-field .mq-cursor {
-  border-left: 2px solid #1865f2 !important;
-  margin-left: -1px !important;
-  margin-right: -1px !important;
-  opacity: 1 !important;
-  transition: opacity 500ms ease-out !important;
-  visibility: visible !important;
-}
-.keypad-input .mq-editable-field .mq-cursor.mq-blink {
-  opacity: 0 !important;
-  transition: opacity 500ms ease-in !important;
-  visibility: visible !important;
-}
-.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
-  border: 2px solid !important;
-  border-color: #1865f2 !important;
-  border-radius: 1px;
-  opacity: 1 !important;
-  padding: 0 4px 0 4px;
-  transition: border-color 500ms ease-out !important;
-}
-.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
-  border-color: #1865f2 !important;
-  opacity: 1 !important;
-  transition: border-color 500ms ease-in !important;
-}
-.keypad-input .mq-empty {
-  background: transparent !important;
-}
-.keypad-input .mq-empty:not(.mq-root-block):after,
-.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
-  border: 2px solid rgba(33, 36, 44, 0.16);
-  border-radius: 1px;
-  color: transparent;
-  display: inline-block;
-  margin-left: -1px;
-  margin-right: -1px;
-  padding: 0 4px 0 4px;
-  visibility: visible !important;
-}
-.keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
-  border-color: white;
-}
-.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
-  content: 'c';
-}
-.keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
-.keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
-  background: #1865f2 !important;
-  border-color: white !important;
-  color: white !important;
-}
-.keypad-input .mq-math-mode .mq-selection .mq-scaled,
-.keypad-input .mq-editable-field .mq-selection .mq-scaled {
-  background: transparent !important;
-  border-color: transparent !important;
-  color: white !important;
-}
-.keypad-input .mq-selection {
-  background: #1865f2 !important;
-  border-color: white !important;
-  color: white !important;
-  display: inline-block !important;
-}
-.keypad-container .katex {
-  color: inherit !important;
-}
-
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * popover-manager.js must change as well.
- */
-.popover-enter {
-  opacity: 0 !important;
-}
-.popover-enter.popover-enter-active {
-  opacity: 1 !important;
-  transition: opacity 200ms ease-out !important;
-}
-