Merge pull request #345 from paulkaplan/scratch-svg-text

Text follow ups: don't strip newlines and use Scratch default size/font

src/components/paint-editor/paint-editor.css

@@ -208,8 +208,11 @@ $border-radius: 0.25rem;
     background: transparent;
     border: none;
     display: none;
-    font-family: Times;
-    font-size: 30px;
+
+    /* @todo needs to match the text tool font/size */
+    font-family: Helvetica;
+    font-size: 22px;
+
     outline: none;
     overflow: hidden;
     padding: 0px;

src/containers/paper-canvas.jsx

@@ -86,13 +86,10 @@ class PaperCanvas extends React.Component {
     importSvg (svg, rotationCenterX, rotationCenterY) {
         const paperCanvas = this;
         // Pre-process SVG to prevent parsing errors (discussion from #213)
-        // 1. Remove newlines and tab characters, chrome will not load urls with them.
-        //      https://www.chromestatus.com/feature/5735596811091968
-        svg = svg.split(/[\n|\r|\t]/).join('');
-        // 2. Remove svg: namespace on elements.
+        // 1. Remove svg: namespace on elements.
         svg = svg.split(/<\s*svg:/).join('<');
         svg = svg.split(/<\/\s*svg:/).join('</');
-        // 3. Add root svg namespace if it does not exist.
+        // 2. Add root svg namespace if it does not exist.
         const svgAttrs = svg.match(/<svg [^>]*>/);
         if (svgAttrs && svgAttrs[0].indexOf('xmlns=') === -1) {
             svg = svg.replace(

src/helper/tools/text-tool.js

@@ -47,7 +47,7 @@ class TextTool extends paper.Tool {
         this.boundingBoxTool = new BoundingBoxTool(Modes.TEXT, setSelectedItems, clearSelectedItems, onUpdateSvg);
         this.nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateSvg);
         this.lastEvent = null;
-        
+
         // We have to set these functions instead of just declaring them because
         // paper.js tools hook up the listeners in the setter functions.
         this.onMouseDown = this.handleMouseDown;
@@ -193,8 +193,8 @@ class TextTool extends paper.Tool {
             this.textBox = new paper.PointText({
                 point: event.point,
                 content: '',
-                font: 'Times',
-                fontSize: 30,
+                font: 'Helvetica',
+                fontSize: 22,
                 fillColor: this.colorState.fillColor,
                 // Default leading for both the HTML text area and paper.PointText
                 // is 120%, but for some reason they are slightly off from each other.
@@ -215,7 +215,7 @@ class TextTool extends paper.Tool {
     }
     handleMouseUp (event) {
         if (event.event.button > 0 || !this.active) return; // only first mouse button
-        
+
         if (this.mode === TextTool.SELECT_MODE) {
             this.boundingBoxTool.onMouseUp(event);
             this.isBoundingBoxMode = null;
@@ -234,7 +234,7 @@ class TextTool extends paper.Tool {
             // Ignore nudge if a text input field is focused
             return;
         }
-        
+
         if (this.mode === TextTool.SELECT_MODE) {
             this.nudgeTool.onKeyUp(event);
         }